Middle Align Div

[KnightMaire]

I have 3 divs in a container div – i want all of the smaller divs to line up in the vertical middle of the container div.
Here’s what i have: http://dabblet.com/gist/2332123

here’s what i want for all three, yet only applied for one: http://dabblet.com/gist/2332131

How would I do this, preferably without having floats? or if it can only be done with floats, how?

Note: this is just a test document with colors to test CSS.

Thanks,
Chris

P.S. to clarify a bit, i want the inside divs to be 100% of the height as the container, and the content to be middle vertically. I’m trying to make tournament brackets, and have all the match boxes center inside the div vertically.

[joshuanhibbert]

Is this what you are after? http://dabblet.com/gist/2332747

Oops, I didn’t see the P.S.

[KnightMaire]

In the example, i just want the three divs to be in the middle so i know what to do when i make the brackets

[Senff]

If you’re after a tournament grid (from 32 to 1, or 16 to 1 or so), there’s no reason to avoid tables. It’s a grid/table, so using a table for that is the most logical thing I think.

[KnightMaire]

Tables do not support what I’m trying to make, which is why I need to use divs & CSS. I’ve thought about tables but it did not work out.

[mallik]

Hi Try this

.smallbox {
background-color: #EEE;
width: 100px;
margin: 0px auto 0px 0px;
height: 100px;
display:table-cell;
vertical-align:middle;
}

.smallbox div{
background-color: #009900;
}

[Author]

Posts