HTML 表のセル内でテキストを中央に配置する方法: 実践ガイド

表のセルの配置: HTML 表のテキストを中央揃えにするガイド

Web 開発の世界では、表は依然として貴重なツールですデータの構造化と整理に使用します。場合によっては、表のセル内のテキストを水平方向と垂直方向の両方で中央揃えにする必要が生じることがあります。この記事では、この配置を実現するための包括的なソリューションを提供します。

CSS とインライン スタイルを使用してテキストを水平方向に中央揃えにする

テキストを水平方向に中央揃えにする効果的な方法の 1 つ表のセルは、CSS スタイルまたはインライン スタイル属性を通じて行われます。 CSS ファイルまたは HTML ドキュメント自体内で、ターゲット表セルの「text-align」プロパティを「center」に変更できます:

1. CSS Styles:

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

   ログイン後にコピー

2. インライン スタイル属性:

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

   ログイン後にコピー

使用したテキストの垂直方向の中央揃えCSS

表のセル内のテキストを垂直方向に中央揃えにするには、「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 中国語 Web サイトの他の関連記事を参照してください。