[英]How do I vertically align a div inside a table cell?
如何垂直居中表格單元格內的div?
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;
}
我知道類定義是多余的,但我一直在嘗試很多不同的東西。 為什么解決方案(不管它是什么)不直觀。 我試過的“明顯”解決方案都沒有用。
無需在.divClass中定義height
。 像這樣寫:
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
.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;
}
沒有任何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.