Wie kann ich ein Div mit unbekannten Dimensionen in CSS vertikal ausrichten?

Vertikale Div-Ausrichtung mit unbekannten Abmessungen

In CSS kann das dynamische Anpassen der vertikalen Ausrichtung eines Divs eine Herausforderung sein, wenn die Größe des Divs unbekannt ist . Hier ist eine Lösung, die dieses Problem angeht:

CSS-Lösung

Diese reine CSS-Lösung verwendet Vertical-Align:Middle innerhalb eines größeren Div mit einer festen Zeilenhöhe:

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

Erläuterung

Das #center-Div wird in der Mitte seines übergeordneten Divs positioniert, wobei oben: 50 % und Rand-oben-Anpassung die Hälfte seiner Höhe ausmachen. Die enorme Zeilenhöhe stellt sicher, dass der darin enthaltene Textinhalt (in diesem Fall das untergeordnete Div #wrap) unten bleibt.

Innerhalb von #center enthält #wrap das Bild mit Vertical-Align: Middle, Dadurch wird die vertikale Ausrichtung unabhängig von der Bildgröße gewährleistet.

Vorbehalt

Der einzige Browser mit einem Vorbehalt ist IE7. Dafür müssen das innere Div #wrap und das Bild in derselben Zeile stehen:

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

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div mit unbekannten Dimensionen in CSS vertikal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!