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

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

Patricia Arquette

リリース： 2024-11-11 09:52:02

オリジナル

704 人が閲覧しました

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