vertical-alignment - 内容为空的内联 block 使布局困惑(垂直对齐)？

Question

我在处理一些 CSS 时遇到了一个奇怪的问题。两个元素 inline-block 留在同一个容器中。它们都有 width、height 和 line-height。

但是如果我们设置第一个元素为空内容，布局就会乱(垂直对齐)。

可以看到问题here

<div class="part">
  <div class="foo"></div>
  <div class="bar">bar</div>
</div>

.part {
  width: 400px;
  height: 80px;
  background-color: #ddd;
  margin-bottom: 100px;
}
.foo {
  display: inline-block;
  width: 100px;
  height: 80px;
  line-height: 80px;
  background-color: red;
}
.bar {
  display: inline-block;
  width: 100px;
  line-height: 80px;
  height: 80px;
  background-color: green;
}

我知道空内容总是 html 代码的难闻气味。但我只想知道这是为什么以及如何解决这个问题。

我找到了一个 similar question .人们说我们可以使用   而不是空内容。这是我们解决问题的唯一方法吗？或者我们有其他更好的解决方案？

谢谢。

Answer 1

使用“垂直对齐:中间；”到行内 block 元素

垂直对齐:中间；

http://jsbin.com/ajexab/1/edit