display: inline-block, span does not align properly

Question

I've tried the vertical-align property, but failed to align the span in the middle:

 .foo { width: 500px; height: 50px; background-color: powderblue; display: inline-block; } .img { width: 50px; height: 50px; } .bar { vertical-align: middle; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div> 

I've also tried with the display: inline-block and expected that I could now align the span in the middle of the div . Why is this not working?

Answer 1

The default veritcal alignment of inline elements is baseline. So change it to something that fits what you need, like middle.

 .foo { width: 500px; height: 50px; background-color: powderblue; display: inline-block; } .img { width: 50px; height: 50px; vertical-align: middle; } .bar { vertical-align: center; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div> 

Answer 2

"center" is not a valid value for vertical-align, I think you mean "middle".

https://developer.mozilla.org/es/docs/Web/CSS/vertical-align

Also, display:inline-block is doing nothing for you there, as it should be on the child elements (if at all), not the container.

All you need to solve this is use vertical-align:middle on the img.

 .foo { width: 500px; height: 50px; background-color: powderblue; } .img { width: 50px; height: 50px; vertical-align:middle; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div>