[英]How do I vertically align a div inside a table cell?
How do I vertically center a div that is inside a table cell? 如何垂直居中表格单元格内的div?
HTML: HTML:
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
CSS: 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 . 无需在.divClass中定义height
。 write like this: 像这样写:
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
Check this http://jsfiddle.net/ncrKH/ 检查这个http://jsfiddle.net/ncrKH/
.divClass { margin-top:auto; }
HTML HTML
<table border=1>
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
</table>
CSS 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. 没有任何css本身你可以使用valign="middle"
尝试这段代码。
<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>
我在这个问题上找到的最好的教程: 如何垂直居中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.