Wie richtet man Divs vertikal mit dynamischer Größe in CSS aus?

CSS: Vertikale Ausrichtung von Divs mit dynamischer Größe

Bei der Arbeit mit Div-Elementen, die dynamischen Inhalt enthalten, wie z. B. Bilder oder Flash, erfolgt die Ausrichtung sie vertikal zu platzieren, kann eine Herausforderung sein. Herkömmliche Methoden wie das Festlegen fester Höhen oder die Verwendung absoluter Positionierung sind in diesen Situationen möglicherweise nicht durchführbar.

Glücklicherweise bietet CSS eine Lösung, die eine vertikale Ausrichtung ermöglicht, ohne dass bekannte Größen erforderlich sind. Diese Lösung basiert auf der Kombination von Vertical-Align: Middle und Line-Height: 0.

HTML-Struktur

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

CSS-Regeln

<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>

So funktioniert es

• Die Zeilenhöhe des #center-Elements wird auf einen festen Wert (z. B. 2000 Pixel) eingestellt und der Text ausgerichtet ist auf „Mitte“ eingestellt.
• Die Zeilenhöhe des #wrap-Elements ist auf 0 gesetzt.
• Die vertikale Ausrichtung des Bildes ist auf „Mitte“ eingestellt, wodurch es vertikal innerhalb der Zeile, in der es enthalten ist, ausgerichtet wird Element.
• Der Rand des #center-Elements beträgt die negative Hälfte der Elementhöhe, wodurch das Element optisch in der Mitte des Ansichtsfensters positioniert wird.

Diese Technik funktioniert in den meisten modernen Browser, einschließlich IE8, und ohne dass Browser-Hacks erforderlich sind. Es bietet eine saubere und vielseitige Lösung zum vertikalen Ausrichten von Div-Elementen mit dynamischen Größen.

Das obige ist der detaillierte Inhalt vonWie richtet man Divs vertikal mit dynamischer Größe in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!