HTML 表のセル内のテキストを中央に配置するにはどうすればよいですか?

DDD

リリース： 2024-10-31 15:31:10

オリジナル

621 人が閲覧しました

How to Center Text in HTML Table Cells?

HTML テーブルのコンテンツを水平方向および垂直方向に中央揃えにする方法

HTML テーブルのセル内でテキストを水平方向および垂直方向に中央揃えにすると、ページの視覚的な魅力と読みやすさ。これを実現するには、CSS とインラインスタイル属性という 2 つの方法を考慮する必要があります。

CSS メソッド:

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

ログイン後にコピー

次の CSS を追加します:

インラインスタイル属性メソッド:

使用内で直接 style 属性を指定します。タグ。

表のセルごとに text-align プロパティとvertical-align プロパティを「center」に設定します。

<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>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>

ログイン後にコピー

両方の方法を示す例を次に示します。上記の例では、両方のテーブルのすべてのセルのテキストコンテンツが中央揃えで表示されます。 CSS メソッドは、複数のテーブルに配置を適用する場合、または異なるページ間でスタイルシートを再利用する場合に役立ちます。一方、インラインスタイル属性を使用すると、個々のセルをより具体的に制御できます。

以上がHTML 表のセル内のテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：JavaScript を使用せずに CSS Div をページの高さの 100% に伸ばすにはどうすればよいですか? 次の記事：Bootstrap 3 では本当に 12 列を超える列を連続させることができますか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事