Vertically align text and image with display table

HTML & CSS
1

Hi all

I have a jsfiddel here - http://jsfiddle.net/bva700wx/5/

It’s a really simple bootstrap layout.

It’s 2 row’s that contain cols with an image and one with text.

The text and the image can vary in height.

I need the height of both columns to be the same.

If the text is taller I need the image col to the same height

If the image col is taller I need the text col to be the same height.

I then need the vertically center the image and the text.

I thought this would be easy with display: table; and display: tabel-cell;

Any see what I doing wrong

		<div class="container">
		    
		    <div class="row">
		        
		        
		        
		        <div class="col-sm-3 box text-center">
		            <img src="http://placehold.it/100x50" />
		        </div>
		        
			    <div class="col-md-9 box">
		            <p>
		                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		            </p>    
		        </div>
		        
		        
		    </div>
		    
		    <div class="row">
		            
		        <div class="col-sm-3 box text-center">
		            <img src="http://placehold.it/100x150" />
		        </div>
		        
				<div class="col-md-9 box">
		            <p>
		                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		            </p> 
		        </div>
		    
		    </div>	

		</div>
2

According to your fiddle, the columns are indeed the same height.

Apply “vertical-align:middle” to the table-cells, not the image or text and see if that helps. Then we can discuss whatever else you want.