如何居中對齊 HTML 表格內容？-css教學-PHP中文網

如何居中對齊 HTML 表格內容？

Mary-Kate Olsen

發布： 2024-11-02 18:24:02

原創

961 人瀏覽過

How to Center Align HTML Table Contents?

居中對齊HTML 表格內容

使用HTML 表格時，可能需要垂直和水平對齊單元格的內容更具視覺吸引力的結果。以下是實現此目的的方法：

水平和垂直居中文字

內聯樣式屬性：使用text-align屬性居中水平對齊文本，垂直對齊將其垂直對齊。例如：

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

登入後複製

CSS 規則： 定義CSS 規則以使所有表格單元格中的文字居中：

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

登入後複製

以下是一個範例，展示了兩者方法：

<code class="html"><table>
<tr>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
</tr>
</table>

<table border="1" id="cssTable">
<tr>
    <td>Centered Cell</td>
    <td>Centered Cell</td>
</tr>
</table></code>

登入後複製

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

登入後複製

這些技術使您可以輕鬆地將HTML 表格的內容居中，從而產生更加用戶友好且視覺上更有吸引力的界面。

以上是如何居中對齊 HTML 表格內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！