将内联块与更高的内联块垂直对齐

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