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

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

Die vertikale Ausrichtung eines Div-Containers kann eine Herausforderung darstellen, wenn die Höhe und Breite des Divs vorher unbekannt sind . Dies kann häufig auftreten, wenn das Div ein Bild oder ein Flash-Objekt enthält.

Vertikale Ausrichtung mit dynamischen Größen

Um in diesem Szenario eine vertikale Ausrichtung zu erreichen, können wir die Leistung nutzen von CSS2. Diese Lösung erfordert keine Tricks oder Hacks und basiert ausschließlich auf CSS-Prinzipien.

Der Schlüssel zur Ausrichtung ist die Kombination aus vertical-align: middle und line-height: 0 wird auf das untergeordnete Element („wrap“) innerhalb des Containers („center“) angewendet. Damit dies funktioniert, muss der Container jedoch eine feste Zeilenhöhe haben.

HTML-Struktur:

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

CSS-Stile:

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

Implementierungsdetails:

• Positionieren Sie den Container: Das „mittlere“ Div erhält eine relative Position und wird vertikal ausgerichtet bei 50 % des übergeordneten Containers. Seine Höhe ist auf 2000 Pixel eingestellt, um ausreichend Platz für die Ausrichtung zu gewährleisten.
• Zeilenhöhe auf 0 setzen: Die Zeilenhöhe des „wrap“-Divs ist auf 0 gesetzt, wodurch jeglicher Abstand zwischen den Zeilen effektiv entfernt wird .
• Mittlere Ausrichtung: Das untergeordnete Bild des „Wrap“-Divs wird mithilfe von „vertical-align: middle“ vertikal in der Mitte ausgerichtet.

Kompatibilität

Diese Lösung wurde in IE8, Opera, Safari, Firefox und Chrome getestet.

IE7-Vorbehalt:

In IE7 ist es notwendig, die beiden innersten Elemente in einer einzigen Zeile zu kombinieren, um eine ordnungsgemäße Ausrichtung zu erreichen:

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

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