HTML & CSS: Vertical centering of inline elements inside an inline-block

Question

I've read about 20 questions and articles on vertical alignment/centering in HTML/CSS, but I'm still unable to get my specific case working a expected.

Please have a look at 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;
}

I want to vertically center the content of the inner block. The best I've been able to accomplish was by using display: table and display: table-cell, which almost works, but the content isn't quite in the middle.

What am I missing?

Answer 1

Add vertical-align: middle to .outer . This is counter-intuitive because you would expect to have to add it to .inner , but it works.

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