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

removed dead ImageShack link

how wide do you want the boxes to be? – Josef Pfleger Jan 31 '10 at 18:39 — Josef Pfleger, Jan 31 '10 at 18:39

score 5 · Accepted Answer · answered Jan 31 '10 at 18:47

5

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

answered Jan 31 '10 at 18:47

Dewfy

Josef Pfleger · Answer 2 · 2010-01-31T23:25:18.947

3

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;
}

edited Jan 31 '10 at 23:25

answered Jan 31 '10 at 18:51

Josef Pfleger

This is basically the correct way to do things. However, if you change the three elements to `` instead of `
` then you get compatibility with even IE6! For Firefox 2 (if necessary), you can add `display:-moz-inline-box`.
– DisgruntledGoat Jan 31 '10 at 23:14

2 Answers2