Patrickkx Patrickkx - 1 month ago 7
CSS Question

Even if the img is in a separate div, it doesn't show up

Experiencing problem in positioning an image. Look, I have made two columns in one div. Every of them has 50% width. Why the image doesn't appear in the second column, even if there's enough space for it? How to make it go to the second column? Into the

.imgDiv


JsFiddle: https://jsfiddle.net/awxsqLbc/



* {
margin: 0;
padding: 0;
border: 0;
}
body {} .container {
width: 100vw;
height: 100vh;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue
}
.content {
text-align: center;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
min-height: 50vh;
min-width: 70%;
}
.msgDiv {
width: 50%;
}
.imgDiv {
width: 50%;
}
.imgDiv img {
width: 200px;
height: 200px;
}

<div class="container">
<div class="content">

<div class="msgDiv">
<h1>Welcome.</h1>
<h2>Are you hungry? </h2>
<h3>Start</h3>
</div>

<div class="imgDiv">
<img src="http://moderndogmagazine.com/sites/default/files/styles/blog_top_image/public/images/blogs/top_images/nb_seal_04_2.jpg?itok=DR7IOsFi" alt="" />
</div>

</div>
</div>




Answer

add this to .content:

display:flex;
align-items:center;

fiddle here: https://jsfiddle.net/awxsqLbc/1/