How do we use display:table-cell?

Question

I have a div with float:right (no position property declared). This div has some text content which may be wrapped sometimes. I want the text to always be vertically centered. Declaring display:table-cell and vertical-align:middle for this div does not work at all. Can somebody point me in the right direction about table-cell?

I am using FF. Will this work in IE?

Answer 1

If you declare display:table-cell then you have to nest it within elements with display:table-row and display:table. Just like a real table.

Check out Quirks Mode on Tables to see how compatible browsers are.

Answer 2

Will this work in IE?

IE6-7 no. The table display values are not yet usable today for this reason.

The Pixel Developer is right about the nesting... if you have a display: table-cell element outside of a table-row element the resultant rendering is undefined and different browsers will behave differently and randomly.

Answer 3

I can't offer you a way to make display: table-cell; work the way you want it to, but assuming that your requirement is to have the text vertically-centred within its container, I'll offer you a solution to that (bearing in mind that it's relatively fragile).

Assuming the following mark-up:

<div id="pageWrap">

    <h1>This is just filler text</h1>

    <div id="floatedDiv">

        <p>This text should be vertically-centred within the parent div, in this case within the '<code>#floatedDiv</code>.'</p>

    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum metus ultricies lorem adipiscing malesuada. Morbi at nisl dolor. Praesent aliquet convallis ligula, sed auctor mauris lobortis eget. Aliquam venenatis ornare ligula, sit amet pretium erat dapibus eu. Nam rutrum tempor luctus. Sed interdum tempor urna sed bibendum. Donec volutpat pulvinar massa, sit amet laoreet odio ultrices eu. Phasellus in eros et sapien porta venenatis. Vivamus fringilla, lectus in commodo sodales, lorem ligula lobortis felis, et congue justo lectus eu enim. Pellentesque rutrum auctor cursus. Proin vitae blandit purus. Duis et mauris purus. Proin sit amet placerat leo. Phasellus eget eros velit, id luctus augue. Mauris lacus metus, accumsan auctor tempus sed, auctor vitae tellus. Nulla facilisi.</p>

</div>

And the css:

div#floatedDiv  {float: right;
        width: 50%;
        clear: left;
        height: 6em;
        padding: 0.5em;
        margin: 0 0 0.5em 1em;
        border: 1px solid #ccc;
        position: relative;
        }

div#floatedDiv p
        {position: absolute;
        top: 50%;
        left: 1em;
        right: 1em;
        margin-top: -20%;
        }

<!--[if ie]>
    div#floatedDiv p {margin-top: -10%; } 
<![end if]-->

It's fragile because it won't automatically scale itself according to the dimensions, so it looks ever so slightly imperfect. Also note that ie (I've only got IE 8 to test on) requires a different negative margin.

Live demo to be seen over at: http://www.davidrhysthomas.co.uk/so/verticalCentre.html.

Demo works (tested) on:

Ubuntu 9.10: Firefox 3.6, Chrome 5.0.307.11

Windows XP: Firefox 3.6, Chrome 4.0.249.89, IE 8