Help vertically aligning image alongside text

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
    }

For IE8+ I would do it like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.step {
	text-transform: none;
	text-align: left;
	margin: 0 auto;
	width: 65%;
	display:table;
}
.img,.text{display:table-cell;vertical-align:middle;padding:10px;}
.step h4 {
	line-height: 30px;
}
</style>
</head>

<body>
<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>
</body>
</html>

Basically just add this:

.step{display:table}    
.img,.text{display:table-cell;vertical-align:middle;padding:10px;}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.