首頁  >  文章  >  web前端  >  如何將 HTML 表格儲存格中的內容置中對齊?

如何將 HTML 表格儲存格中的內容置中對齊?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-02 02:21:02688瀏覽

How to Center Align Content in HTML Table Cells?

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

建立HTML 表格時,通常希望每個單元格的內容都居中水平和垂直。這可以增強表格的可讀性和美觀性。

要將文字在表格單元格中水平居中,您可以使用帶有 text-align 屬性的 CSS。以下範例示範了這一點:

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

對於垂直對齊,可以使用vertical-align 屬性。此程式碼片段使文字在單元格中垂直居中:

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

您也可以使用內聯樣式屬性使文字居中。如果您只需要將對齊方式套用於特定單元格,這會更方便:

<code class="html"><td style="text-align: center; vertical-align: middle;">Text</td></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></code>

使用CSS 或內聯樣式,您可以輕鬆居中對齊HTML 表格單元格的內容,提供更專業、更有條理的外觀。

以上是如何將 HTML 表格儲存格中的內容置中對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn