高さが不明な Div のテキストを垂直方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

Div での動的な垂直方向のテキスト配置

ホームページ

ウェブフロントエンド

CSSチュートリアル

高さが不明な Div のテキストを垂直方向の中央に配置するにはどうすればよいですか?

Patricia Arquette

Nov 11, 2024 am 09:52 AM

How to Vertically Center Text in a Div of Unknown Height?

Div での動的な垂直方向のテキスト配置

高さが不明な div 内で垂直方向のテキストを中央揃えにするのは難しい場合があります。 div のサイズに関係なく一貫した配置を保証するソリューションを詳しく見てみましょう。

このソリューションでは、表示プロパティを利用してラッパー要素をテーブルとして設定します。これにより、中央に配置したい要素内でvertical-alignプロパティを利用できるようになります。

コード例:

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

ログイン後にコピー

body {width: 100%; height: 100%;}   /* This is just to "view" the div height... */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

ログイン後にコピー

その方法動作:

位置: 絶対と高さ: 100% のプロパティが保証されます。 div が Web ページの高さ全体をカバーしていることを確認します。
div に display: table を設定することで、h1 タグの table-cell プロパティでコンテンツを垂直に配置できるようになります。
vertical-align: middle プロパティは、div 内で h1 タグを垂直方向の中央に配置します。これにより、div のサイズが変更されてもテキストが中央に配置されたままになります。

このソリューションは、Internet Explorer、Firefox、Chrome、Opera、Safari などのさまざまなブラウザーとオペレーティングシステムでテストされています。これは、動的に高さの div 内でテキストを垂直方向に中央揃えにする簡単かつ効果的な方法を提供します。

以上が高さが不明な Div のテキストを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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