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 vertikal innerhalb aus das #wrap-Element, unabhängig von seiner Höhe.
• line-height: 0 entfernt den Standardzeilenabstand für das #wrap-Element und stellt sicher, dass es keine intrinsische Höhe hat.
• Durch das Festlegen von Text- align:center und line-height auf die gewünschte Containerhöhe festlegen, legen wir eine Grundlinie fest, die das Bild vertikal innerhalb des Containers ausrichtet.
• Das #center-Element wird zur vertikalen Positionierung des Containers innerhalb des übergeordneten Containers verwendet und ist zentriert unter Verwendung von CSS-Transformationen.

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

<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 Abmessungen, unabhängig davon, ob sie Bilder, Flash-Objekte oder andere Elemente enthalten.

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!