Menu
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.
577
How to Center a Div Vertically. To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
The CSS vertical align property works smoothly with tables, but not with divs or any other elements. When you use it in a div, it aligns the element alongside the other divs and not the content — which is what we usually want). This only works with display: inline-block; .
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
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/
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
