Center multiple drawers vertically with CSS

Question

I need to center vertically several boxes with different heights.

I do not know the height of the boxes, as they are variable texts.

How can I do this with CSS (without using td and valign). Tried display: table-cell , but doesn't seem to be compatible with IE

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

dead link ImageShack removed

Answer 1

Not so elegant, but it works. Create a single cell table. Only the table has vertical alignment vertically.

Answer 2

Assuming you want the fields to be fixed, you can use 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 .