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.
There is no need to define height
in .divClass . write like this:
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
Check this http://jsfiddle.net/ncrKH/
.divClass { margin-top:auto; }
HTML
<table border=1>
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
</table>
CSS
.rowClass {
vertical-align:middle !important;
height:90px;
}
.cellClass {
vertical-align:middle !important;
height:90px;
}
.divClass {
margin-top:auto;
}
With out any css itself you can do this with valign="middle"
try this code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th height="550" align="center" valign="middle" scope="col">
<div>Hello</div>
</th>
</tr>
</table>
我在这个问题上找到的最好的教程: 如何垂直居中
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.