CSS を使用して動的にサイズ変更された Div を垂直方向に揃えるにはどうすればよいですか?

CSS を使用した動的サイズの Div の垂直方向の配置

CSS の世界では、特に未知のサイズまたは動的なサイズの div。次のシナリオを考えてみましょう。画像または Flash オブジェクトを含む div があり、コンテナまたは子のサイズに関係なく、それを親コンテナ内で垂直に配置したいとします。

解決策:

CSS は、このジレンマに対する洗練された解決策を提供します。 vertical-align: middle と line-height: 0 の組み合わせを利用すると、不定サイズのコンテナ内で水平方向と垂直方向の両方の中央揃えを実現できます。

HTML 構造:

<code class="html"><span id="center">
  <span id="wrap">
    <img src="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

CSS スタイル:

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}</code>

説明:

• vertical-align: middle は画像を垂直方向に配置します。 #wrap 要素。その高さに関係なく。
• line-height: 0 は、#wrap 要素のデフォルトの行間隔を削除し、本質的な高さを持たないようにします。
• テキストを設定することで、 align: center と line-height を希望のコンテナーの高さに合わせて、コンテナー内で画像を垂直方向に整列させるベースラインを確立します。
• #center 要素は、親コンテナー内でコンテナーを垂直方向に配置するために使用され、中央に配置されます。 CSS 変換を使用します。

Internet Explorer 7 の注意: IE7 との互換性を確保するには、この変更例で示すように、最も内側の要素 (#wrap と ) を 1 行で宣言する必要があります。 HTML 構造:

<code class="html"><span id="center">
  <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span></code>

この純粋な CSS2 ソリューションは、画像、Flash オブジェクト、その他の要素が含まれているかどうかに関係なく、動的ディメンションを持つ div に信頼性の高い配置を提供します。

以上がCSS を使用して動的にサイズ変更された Div を垂直方向に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。