HTML & CSS: inline-block中的inline元素垂直居中

Question

我已经阅读了大约20个关于HTML/CSS中垂直对齐/居中的问题和文章，但我仍然无法让我的特定案例发挥预期的作用。

请看一下http://jsfiddle.net/pf29r/3/

<div class="outer">
  <div>Left1</div>
  <div>Left2</div>
</div>
<div class="inner">
  <a href="#">Before</a>
  <span>Middle</span>
  <a href="#">After</a>
</div>
<div class="outer">
  <div>Right1</div>
  <div>Right2</div>
</div>

.outer {
  display: inline-block;
}

.inner {
  display: inline-block;
}

我希望将内部块的内容垂直居中。我能做的最好的事情就是使用display: table和display: table-cell，它几乎可以工作，但是内容不是很好。

我遗漏了什么？

Answer 1

将vertical-align: middle添加到.outer。这是违反直觉的，因为您可能希望将其添加到.inner中，但它确实有效。

http://jsfiddle.net/pf29r/5/