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

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

Web サイトの要素をユーザーが調整可能なブラウザーの高さに合わせて調整する場合、多くの場合、垂直方向の配置を確保することが重要です動的高さ div 内のテキストは中央に配置されたままになります。これはどのように実現できますか?

次の HTML 構造を考えてみましょう。

を垂直方向に揃えるには、境界内の

タグ高さに関係なく、次の戦略を採用します。解決策:

表示プロパティを利用してラッパー

を設定します。 コード例:

HTML

CSS

このアプローチは、以下を含むさまざまなブラウザおよびプラットフォームでテストされています。
• テスト済みシステム:

Windows XP Professional、Service Pack 3

Windows 7 Home Edition、Service Pack 1

Linux Ubuntu 12.04

• テスト済みブラウザ:
• Internet Explorer 8.0.6001.18702、9.0.8112.164211C
• Opera 11.62
• Firefox 3.6.16、12.0

Safari 5.1.2、5.1.4Google Chrome 18.0.1025.168 mChromium 18.0.1025.151 (開発者ビルド 130497 Linux)

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