ホームページ > 記事 > ウェブフロントエンド > サイズ変更可能な Div でテキストを垂直方向の中央に配置するにはどうすればよいですか?
サイズ変更可能な Div でテキストを垂直方向の中央に配置するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-09 07:50:02245ブラウズ
サイズ変更可能な 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:
- Internet Explorer 8
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18
Windows 7:
- Internet Explorer 9
- Opera 11.62
- Firefox 12
- Safari 5.1.4
- Google Chrome 18
Linux Ubuntu 12.04:
- Firefox 12
- Chromium 18
以上がサイズ変更可能な Div でテキストを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。