如何將 HTML 表格單元格中的文字置中：實用指南

對齊表格單元格：HTML 表格中文本居中指南

在Web 開發領域，表格仍然是一個有價值的工具用於建構和組織數據。有時，您可能需要將文字在表格單元格內水平和垂直居中。本文將為您提供實現這種對齊的全面解決方案。

使用CSS 和內聯樣式使文字水平居中

一種在文本中水平居中文本的有效方法表格單元格是透過CSS 樣式或內聯樣式屬性實現的。在CSS 檔案或HTML 文件本身中，您可以將目標表格儲存格的「text-align」屬性修改為「center」：

1. CSS 樣式:

   <code class="css">td {
       text-align: center;
   }</code>

2. 內聯樣式屬性:

   <code class="html"><td style="text-align: center;">Text</td></code>

使用垂直居中文字

要在表格單元格內垂直居中文本，請使用「vertical-align」CSS 屬性：

1. CSS 樣式：

   <code class="css">td {
       vertical-align: middle;
   }</code>

2. 內聯樣式屬性:

   <code class="html"><td style="vertical-align: middle;">Text</td></code>

下面是一個結合水平和垂直居中的示例CSS和內聯樣式：

<code class="css">td {
    height: 50px; 
    width: 50px;
}

#cssTable td {
    text-align: center; 
    vertical-align: middle;
}</code>

<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中文網其他相關文章！