HTML＆amp; CSS：内联块内部元素的垂直居中

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/