Wie funktioniert die vertikale Ausrichtung mit der Eigenschaft „vertical-align'?

Vertikale Ausrichtung mit der Vertical-Align-Eigenschaft

In der Welt des Webdesigns spielt die vertikale Ausrichtung eine entscheidende Rolle bei der Verbesserung der visuellen Ästhetik und Inhalte effektiv organisieren. Die CSS-Eigenschaft „Vertical-Align“ bietet eine Möglichkeit, Inline-Elemente innerhalb eines übergeordneten Elements vertikal zu positionieren, sodass Entwickler eine präzise Ausrichtung erreichen können. Allerdings kann es eine verwirrende Aufgabe sein, ihre Feinheiten zu verstehen.

Bestimmen der vertikalen Ausrichtung

Um die Mechanismen der vertikalen Ausrichtung zu verstehen, müssen wir zunächst anerkennen, dass sie nur für Folgendes gilt Inline-Elemente. Diese Elemente wie , oder Text innerhalb von Elementen auf Blockebene belegen eine einzelne Zeile und haben keine implizite Höhe. Darüber hinaus ist es wichtig, eine Zeilenhöhe für Elemente anzugeben, denen eine inhärente fehlt.

Die Höheneigenschaft des übergeordneten Elements muss einen statischen Wert besitzen, damit die vertikale Ausrichtung wirksam wird. Automatische oder Prozentwerte reichen nicht aus. Darüber hinaus stoßen verschiedene moderne Browser auf Schwierigkeiten, die vertikale Ausrichtung von Nicht-Inline-Elementen genau darzustellen.

Elementauswahl für die Ausrichtung

Ein häufiges Missverständnis ist, dass die vertikale Ausrichtung auf angewendet wird das Containerelement, ähnlich wie text-align. Es sollte jedoch dem Element zugewiesen werden, das eine vertikale Positionierung erfordert. Wenn wir beispielsweise ein

Tag innerhalb eines

, sollte die Vertical-Align-Eigenschaft direkt auf

angewendet werden.

Praktisches Beispiel

Berücksichtigen Sie das folgende HTML und CSS Code:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}

Intuitiv könnte man erwarten, dass das

Element, das innerhalb des

vertikal zentriert werden soll. Elemente. Dies ist jedoch nicht der Fall. Um zu verstehen, warum, ist es wichtig, sich daran zu erinnern, dass die vertikale Ausrichtung Zeile für Zeile innerhalb des übergeordneten Elements erfolgt. Wenn daher der Inhalt des

Element überschreitet eine einzelne Zeile, das

wird nicht wie erwartet ausgerichtet.

Um dieses Konzept zu veranschaulichen, können wir den HTML-Code ändern:

<div>
<p>Wie Sie sehen können, ist das </p>
<h1 id="Das-Element-ist-jetzt-vertikal-innerhalb-des-übergeordneten-Elements-zentriert-da-die-vertikale-Ausrichtung-auf-der-Zeilenhöhe-des-Textes-basiert"> Das Element ist jetzt vertikal innerhalb des übergeordneten Elements zentriert, da die vertikale Ausrichtung auf der Zeilenhöhe des Textes basiert.</h1>
</div>