Vertically center multiple boxes with CSS

Question

I need to center vertically multiple boxes with different heights.

I dont know the height of the boxes as they are variable texts.

How can I do this with CSS (without having to use td and valign). Tried display: table-cell but it seems not compatible with IE

The image below shows the design, the post-it is the browser window

Answer 1

Not so elegant, but works. Create one-cell table. Only table has cross-browser vertical-align.

Answer 2

Assuming you want the boxes to be fixed-width you can use the folling markup

<div class="vcontainer">
    <span>1<br/>2</span>
    <span>1<br/>2<br/>3<br/>4</span>
    <span>1<br/>2<br/>3</span>
</div>

with these styles

.vcontainer {
    text-align: center;
}

.vcontainer span {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

The inline-block property works in most modern browsers.