首頁 > web前端 > css教學 > 如何將 HTML 表格單元格中的文字置中:實用指南

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

DDD
發布: 2024-11-04 07:25:30
原創
680 人瀏覽過

How to Center Text in HTML Table Cells: A Practical Guide

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

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

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

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

  1. CSS 樣式:

    1

    2

    3

    <code class="css">td {

        text-align: center;

    }</code>

    登入後複製
  2. 內聯樣式屬性:

    1

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

    登入後複製

使用垂直居中文字

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

  1. CSS 樣式

    1

    2

    3

    <code class="css">td {

        vertical-align: middle;

    }</code>

    登入後複製
  2. 內聯樣式屬性:

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板