html - 将一个内联 block 垂直对齐到一个更高的内联 block 旁边

Question

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

我想我理解垂直对齐，但它对我没有帮助，因为它根据 .b 的基线对齐，它靠近 #container 的底部。

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

代码笔: 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