Question

我想垂直对齐图像.b，使其位于文本的中心（垂直）。

我认为我理解vertical-align，它对我没有帮助，因为它根据.b的基线对齐，它靠近#container的底部。

这样做的正确做法是什么？我想避免从顶部设置保证金。我基本上想根据父容器高度而不是基线对齐，是否可能/对吧？

codepen： http://codepen.io/Vall3y/pen/vEONaJ

html：

<div id='container'>
  <div class="a"></div>
  <div class="b">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

的CSS：

#container {  
  width: 100px;
  font-size: 0;  
}

#container > div {
  display: inline-block;
}

.a {  
  width: 30px;
  height: 30px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  background-image:  url(http://upload.wikimedia.org/wikipedia/en/f/f4/Free_Blue_Star.jpg)
}

.b {
  width: 70px;
  font-size: 14px;
}

Answer 1

只需将vertical-align: middle;放在.a和.b上即可。

你当然可以给.b填充和背景位置为left center的背景图像，同时删除.a

垂直对齐较高的内联块旁边的内联块

1 个答案: