HTML テーブル内でテキストを水平方向と垂直方向の両方で中央揃えにするにはどうすればよいですか?

HTML テーブル内のテキストを水平方向と垂直方向に配置する

HTML テーブルで、各セル内のテキストを水平方向と垂直方向の両方で中央揃えにします。データの表示と読みやすさを向上させることができます。これを実現するための詳細なガイドは次のとおりです。

水平方向の配置

テキストを水平方向に中央揃えにするには、CSS の text-align プロパティを使用します。 text-align: center; を追加します。

の style 属性に追加します。要素。これにより、テキストが各セルの中央に配置されます。

垂直方向の配置

垂直方向の配置の場合は、CSS のvertical-align プロパティを適用します。垂直方向の配置を設定します: 中央;テキストがセル内で垂直方向の中央に配置されるようにします。このプロパティは、セルの高さに基づいて調整する必要がある場合があります。

インライン スタイルを使用した例

テーブル内でインライン スタイルを使用して、次の配置を適用できます。

<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 中国語 Web サイトの他の関連記事を参照してください。