CODEWITHSUNDEEP
htmlcss
Willem van der Veen
Willem van der Veen

Reputation: 36620

display: inline-block, span does not align properly

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?

Upvotes: 0

Views: 351

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3913

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

Upvotes: 1

j08691
j08691

Reputation: 207901

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>

Upvotes: 3

Related Questions