
對齊表格單元格:HTML 表格中文本居中指南
在Web 開發領域,表格仍然是一個有價值的工具用於建構和組織數據。有時,您可能需要將文字在表格單元格內水平和垂直居中。本文將為您提供實現這種對齊的全面解決方案。
使用CSS 和內聯樣式使文字水平居中
一種在文本中水平居中文本的有效方法表格單元格是透過CSS 樣式或內聯樣式屬性實現的。在CSS 檔案或HTML 文件本身中,您可以將目標表格儲存格的「text-align」屬性修改為「center」:
-
CSS 樣式:
1 2 3 | <code class = "css" >td {
text-align: center;
}</code>
|
登入後複製
-
內聯樣式屬性:
1 | <code class = "html" ><td style= "text-align: center;" >Text</td></code>
|
登入後複製
使用垂直居中文字
要在表格單元格內垂直居中文本,請使用「vertical-align」CSS 屬性:
-
CSS 樣式:
1 2 3 | <code class = "css" >td {
vertical-align: middle;
}</code>
|
登入後複製
-
內聯樣式屬性:
1 | <code class = "html" ><td style= "vertical-align: middle;" >Text</td></code>
|
登入後複製
下面是一個結合水平和垂直居中的示例CSS和內聯樣式:
1 2 3 4 5 6 7 8 9 | <code class = "css" >td {
height: 50px;
width: 50px;
}
#cssTable td {
text-align: center;
vertical-align: middle;
}</code>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 | <code class = "html" ><table>
<tr>
<td style= "text-align: center; vertical-align: middle;" >Text</td>
<td style= "text-align: center; vertical-align: middle;" >Text</td>
</tr>
</table>
<table border= "1" id= "cssTable" >
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table></code>
|
登入後複製
以上是如何將 HTML 表格單元格中的文字置中:實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!