CSS_html/css_WEB-ITnose で DIV コンテナの垂直方向のセンタリングを実装します。

1.vertical-align: 中央の垂直方向の配置

テーブル要素の

、 、 など、

、 のような要素はvalign 機能がないため、vertical-align を使用しても機能しません。

2.text-align:center テキストは水平方向に中央揃えになります

1. 単一行の垂直方向の中央揃え

コンテナ内にテキストが 1 行しかない場合、テキストを中央揃えにするのは比較的簡単です。実際の高さと位置を設定する 行の高さ line-height は同じにすることができます。例:

ExampleSourceCode

DIV{ height:25px; line-height:25px; overflow:hidden; //overflow:hidden の設定は、コンテンツがコンテナを超えたり、自動的に行を折り返したりするのを防ぐために使用されます。 Internet Explorer 6 以前では、このメソッドとメソッドは画像の垂直方向の中央揃えをサポートしていません。

2. 高さが不明な複数行のテキストの垂直方向の中央揃え

コンテンツの高さが可変の場合、前のセクションで説明した水平方向の中央揃えを実現するために使用される最後の方法、つまり Padding を設定することができます。上部と下部のパディング値を同じにするだけです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを

内に完全に埋める方法にすぎません。次のようなコードを使用できます:

DIV{padding:25px; }

このメソッドの利点は、どのブラウザでも実行でき、コードが非常に単純であることですが、このメソッドの前提条件は、コンテナはフレキシブルである必要があります。