Search code examples
htmlcsshtml-tablevertical-alignment

How do I vertically align a div inside a table cell?

How do I vertically center a div that is inside a table cell?

HTML:

<tr class="rowClass">
    <td class="cellClass">
        <div class="divClass">Stuff</div>
    </td>
</tr>

CSS:

.rowClass {
    vertical-align:middle !important;
    height:90px;
}

.cellClass {
    vertical-align:middle !important;
    height:90px;
}

.divClass {
    vertical-align:middle !important;
    height:90px;
}

I know the class definitions are redundant, but I've been trying lots of different things. Why isn't the solution (whatever it is) intuitive. None of the "obvious" solutions that I tried would work.

Solution

  • There is no need to defineheight in .divClass . write like this:

    .cellClass {
    vertical-align:middle;
    height:90px;
    border:1px solid red;
}

    Check this http://jsfiddle.net/ncrKH/