将内嵌块与较高的内嵌块垂直对齐

Question

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

我想我了解垂直对齐方式，但对我没有帮助，因为它根据.b的基线对齐，该基线靠近＃容器的底部。

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

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上都可以使用。

您当然可以在删除.a的同时给.ba填充和背景图片，其背景位置为left center