I have a div with an image and text inside of it. My intention is for the image to be in the vertical middle of the text block on all different view sizes. The issue with current code is that the image does not re-position when the text takes up more vertical space on smaller screens.
Any advice on the correct way to code this? My code at bottom.
Full width:
Smaller screen:
Even smaller:
<div class="steps row">
<div class="step">
<div class="img">
<img class=" size-full wp-image-928 alignleft" src="http://keepercircle.com/wp-content/uploads/2015/05/1.jpg" alt="1" width="52" height="52" />
</div>
<div class="text">
<h4>Create the perfect ouftit to go with the classic Chanel bag</h4>
</div>
</div>
</div>
.step {
text-transform: none;
text-align: left;
margin: 0 auto;
width: 65%;
}
.step h4 {
line-height: 30px;
}
.text {
overflow:hidden
}