html テーブルセル中央寄せ

HTML 表格单元格居中

この記事では、HTML の表のセル内のコンテンツを水平方向と垂直方向に中央揃えする方法について詳しく説明します。さまざまな方法とサンプルコードを紹介しますので、表のレイアウトスキルを簡単に習得できます。

一、水平方向のセンタリング


<table>
  <tr>
    <td style="text-align: center;">中央揃えのテキスト</td>
  </tr>
</table>

align="center"：以前は水平方向のセンタリングにも使用されていましたが、現在は非推奨となっています。互換性を高めるために、text-align プロパティを使用することをお勧めします。


<table>
  <tr>
    <td style="vertical-align: middle;">垂直方向に中央揃えされたテキスト</td>
  </tr>
</table>

セル内のコンテンツが1行のテキストのみの場合、line-height プロパティを設定して、セルの高さと同じにすることで垂直方向に中央揃えすることができます。


<table>
  <tr>
    <td style="height: 50px; line-height: 50px;">垂直方向に中央揃えされたテキスト</td>
  </tr>
</table>


<table>
  <tr>
    <td style="display: flex; align-items: center;">垂直方向に中央揃えされたテキスト</td>
  </tr>
</table>

text-align: center と vertical-align: middle を組み合わせて使用すると、セル内のコンテンツを水平方向と垂直方向に中央揃えすることができます。


<table>
  <tr>
    <td style="text-align: center; vertical-align: middle;">水平方向と垂直方向に中央揃え</td>
  </tr>
</table>

セルをFlexコンテナとして設定し、justify-content: center と align-items: center プロパティを使用して水平方向と垂直方向に中央揃えします。


<table>
  <tr>
    <td style="display: flex; justify-content: center; align-items: center;">水平方向と垂直方向に中央揃え</td>
  </tr>
</table>

上記の方法を使用すると、実際の状況に応じて適切なソリューションを選択し、HTML 表のセル内のコンテンツの水平方向と垂直方向のセンタリングを柔軟に制御できます。