Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected.
If you have a moment, please take 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;
}
My goal is to vertically center the content of the inner block. So far, I've tried using display: table and display: table-cell, which almost works but the content isn't perfectly centered.
Any insights or suggestions would be greatly appreciated!