如何在 HTML 表格中水平和垂直居中文字？-css教學-PHP中文網

如何在 HTML 表格中水平和垂直居中文字？

Linda Hamilton

發布： 2024-11-03 00:50:02

原創

631 人瀏覽過

How do I center text both horizontally and vertically in an HTML table?

水平和垂直對齊HTML 表格中的文字

在HTML 表格中，將每個單元格內的文字水平和垂直居中，可以增強數據的呈現和可讀性。以下是實現此目的的詳細指南：

水平對齊

要使文字水平居中，請使用 text-align CSS 屬性。新增文字對齊：居中；到

的 style 屬性元素。這會將文字對齊到每個單元格的中心。

垂直對齊

垂直對齊，請套用 Vertical-align CSS 屬性。設定垂直對齊：中間；以確保文字在儲存格內垂直居中。此屬性可能需要根據儲存格的高度進行調整。

內嵌樣式範例

您可以在表格中使用內聯樣式來套用這些對齊方式：

<code class="html"><table border="1">
  <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類別範例

或者，您可以建立一個CSS 類別來應用對齊方式：

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

登入後複製

並使用它表中：

<code class="html"><table border="1">
  <tr>
    <td class="center-text">Text</td>
    <td class="center-text">Text</td>
  </tr>
</table></code>

登入後複製

請記住，單元格的指定高度和寬度可能會影響垂直對齊。根據需要調整值以獲得所需的結果。

以上是如何在 HTML 表格中水平和垂直居中文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！