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?

Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — jontro, Jan 16 '18 at 22:17

score 2 · Accepted Answer · answered Jan 16 '18 at 22:21

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>

score 1 · Answer 2 · answered Jan 16 '18 at 22:32

"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>

display: inline-block, span does not align properly

2 Answers2