サイズ変更可能な Div でテキストを垂直方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

サイズ変更可能な Div でテキストを垂直方向の中央に配置するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-09 07:50:02

オリジナル

272 人が閲覧しました

How to Vertically Center Text in a Resizable Div?

サイズ変更可能な Div でテキストを垂直方向の中央に配置する方法

動的にサイズ変更された div 要素を操作する場合、div 内のテキストの垂直方向の配置を維持するのが難しい場合があります。この問題は、div の高さがユーザーのブラウザの高さなどの要因によって変わる可能性があるため、固定されていない場合に発生します。

解決策:

この問題に対処するには、汎用性の高いソリューションには、display プロパティを利用して div 要素を表構造に変換することが含まれます。表示プロパティを table に設定することで、div 内にテーブルのような環境を作成します。これにより、テキスト要素のvertical-alignプロパティを使用して、div内で垂直方向に中央揃えにすることができます。

HTMLマークアップ:

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

ログイン後にコピー

CSSスタイリング:

body {
    width: 100%;
    height: 100%;
}

div {
    position: absolute;
    height: 100%;
    width: 100%;
    display: table;
}

h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

ログイン後にコピー

注目のブラウザテスト済み:

この手法を使用して、次のようなさまざまなブラウザーで div 要素内のテキストの垂直方向の中央揃えをテストすることに成功しました。

Windows XP: