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

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

In der Welt von CSS kann das Erreichen einer perfekten Ausrichtung eine Herausforderung sein, insbesondere im Umgang mit Divs unbekannter oder dynamischer Größe. Stellen Sie sich das folgende Szenario vor: Sie haben ein Div, das ein Bild- oder Flash-Objekt enthält, und möchten es vertikal innerhalb seines übergeordneten Containers ausrichten, unabhängig von den Abmessungen des Containers oder des untergeordneten Containers.

Lösung:

CSS bietet eine elegante Lösung für dieses Dilemma. Durch die Kombination von Vertical-Align: Middle und Line-Height: 0 können wir sowohl eine horizontale als auch eine vertikale Zentrierung innerhalb eines Containers unbestimmter Größe erreichen.

HTML-Struktur:

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

CSS Stile:

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

Erklärung:

• vertikal-align: middle richtet das Bild unabhängig von seiner Höhe vertikal innerhalb des #wrap-Elements aus .
• line-height: 0 entfernt den Standardzeilenabstand für das #wrap-Element und stellt so sicher, dass es kein intrinsisches hat height.
• Indem wir text-align: center und line-height auf die gewünschte Containerhöhe einstellen, legen wir eine Grundlinie fest, die das Bild vertikal innerhalb des Containers ausrichtet.
• Das #center-Element wird verwendet zur vertikalen Positionierung des Containers innerhalb des übergeordneten Containers und zur Zentrierung mithilfe von CSS-Transformationen.

Hinweis für Internet Explorer 7: Um die Kompatibilität mit IE7 sicherzustellen, werden die innersten Elemente verwendet (#wrap und ) sollten in einer einzelnen Zeile deklariert werden, wie in dieser modifizierten HTML-Struktur gezeigt:

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

Diese reine CSS2-Lösung bietet eine zuverlässige Ausrichtung für Divs mit dynamischen Dimensionen, unabhängig davon, ob sie enthalten Bilder, Flash-Objekte oder andere Elemente.

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