CODEWITHSUNDEEP
htmlcss
Victor
Victor

Reputation: 23972

Vertically center multiple boxes with CSS

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

Upvotes: 19

Views: 2558

Answers (2)

Josef Pfleger
Josef Pfleger

Reputation: 74527

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.

Upvotes: 3

Dewfy
Dewfy

Reputation: 23634

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

Upvotes: 5

Related Questions