html - 显示 : inline-block, 跨度未正确对齐

Question

我已经尝试了 vertical-align 属性，但未能将 span 居中对齐:

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

我也尝试过使用 display: inline-block 并期望我现在可以在 div 中间对齐 span >。为什么这不起作用？

Answer 1

内联元素的默认垂直对齐方式是基线。因此，将其更改为适合您需要的内容，例如中间。

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