CSS で動的にサイズ変更された Div を垂直方向に揃えるにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-02 12:07:02

オリジナル

213 人が閲覧しました

How to Vertically Align Dynamically Sized Divs in CSS?

CSS で動的にサイズ変更された Div の垂直方向の配置

div コンテナの垂直方向の配置は、div の高さと幅が事前に不明な場合に問題が発生する可能性があります。これは、div に画像または Flash オブジェクトが含まれている場合によく発生します。

動的サイズによる垂直方向の配置

このシナリオで垂直方向の配置を実現するには、 CSS2の。このソリューションにはトリックやハックは含まれず、CSS の原則のみに依存しています。

配置の鍵は、vertical-align: middle と line-height: 0 コンテナ ('center') 内の子要素 ('wrap') に適用されます。ただし、これを機能させるには、コンテナの行の高さが固定されている必要があります。

HTML 構造:

<code class="html"><span id="center">
    <span id="wrap">
        <img src="image.png" alt="" />
    </span>
</span></code>

ログイン後にコピー

CSS スタイル:

<code class="css">#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>

ログイン後にコピー

実装の詳細:

コンテナの位置: 'center' div には相対位置が与えられ、垂直方向に整列されます。親コンテナの 50%。位置合わせに十分なスペースを確保するために、その高さは 2000 ピクセルに設定されています。
行の高さを 0 に設定します: 「ラップ」 div の行の高さは 0 に設定されており、行間のスペースが効果的に削除されます。 .
中央配置: 「wrap」div の子画像は、「vertical-align: middle」を使用して中央に垂直に配置されます。

互換性

このソリューションは、IE8、Opera、Safari、Firefox、および Chrome でテストされています。

IE7 警告:

IE7 の場合、適切な配置を実現するには、最も内側の 2 つの要素を 1 行に結合する必要があります:

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