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="image.jpg" alt="" />
    </span>
</span></code>

CSS ルール

<code class="css">html, body {
    height: 100%;
    width: 100%;
    padding: 0;
}

#center {
    position: relative;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

仕組み

• #center 要素の line-height は固定値 (例: 2000px) に設定され、text-align
• #wrap 要素の line-height は 0 に設定されています。
• 画像のvertical-alignはmiddleに設定されており、画像を含む行内で垂直方向に配置されます。
• #center 要素のマージンは要素の高さのマイナスの半分であり、これにより要素がビューポートの中央に視覚的に配置されます。

この手法は、ほとんどの最新の環境で機能します。 IE8 を含むブラウザで動作し、ブラウザのハッキングは必要ありません。これは、動的サイズの div 要素を垂直方向に整列させるためのクリーンで多用途なソリューションを提供します。

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