HTML和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/