レスポンシブな Div 要素でテキストを垂直方向の中央に配置するにはどうすればよいですか?

レスポンシブ Div 要素でのテキストの垂直方向の配置

動的サイズの DIV コンテナ内のコンテンツを扱う場合、テキストを垂直方向に配置するのは困難な場合があります。この質問では、高さに関係なく DIV 要素内でテキストを垂直方向に中央揃えする方法について説明します。

問題文:

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

DIV に関係なく、H1 タグを DIV 内で垂直方向の中央に配置するにはどうすればよいですか?高さ?

解決策:

最も効果的な解決策には、表示プロパティを活用することが含まれます。ラッパー要素をテーブルとして設定することで、vertical-align:middle を使用して要素を中央に配置できるようになります:

テスト:

このソリューションは、次のようなさまざまなプラットフォームとブラウザでテストされています。

Windows XP Profissionalバージョン 2002 Service Pack 3

• Internet Explorer 8.0.6001.18702
• Opera 11.62
• Firefox 3.6.16
• Safari 5.1.2
• Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

• Internet Explorer 9.0.8112.164211C
• Opera 11.62
• Firefox 12.0
• Safari 5.1.4
• Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

• Firefox 12.0
• Chromium 18.0.1025.151 (開発者ビルド 130497) Linux)

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