Warum zentriert „vertical-align: middle' Inline-Inhalte nicht immer vertikal?

Unerwartete Folgen von Vertical-Align: Falsch ausgerichteter Inhalt

Im Bereich des Webdesigns spielt Vertical-Align eine entscheidende Rolle bei der vertikalen Positionierung von Elementen . Es gibt jedoch Fälle, in denen die beabsichtigte Ausrichtung nicht zustande kommt, was zu einer Fehlausrichtung des Inhalts führt.

Betrachten Sie das folgende Beispiel:

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

In diesem Szenario erwarten wir das Das span-Element soll innerhalb des umgebenden Absatzes vertikal ausgerichtet werden. Wenn wir jedoch „vertikal-align: middle“ auf den Bereich anwenden, kommt es zu einem unerwarteten Ergebnis: Der gesamte Absatz, mit Ausnahme des Inhalts des Bereichs, wird vertikal ausgerichtet.

Warum tritt diese Fehlausrichtung auf? Es handelt sich nicht um einen Fehler, sondern um das erwartete Verhalten von Vertical-Align. Vertical-align gibt die vertikale Ausrichtung von Elementen an. In diesem Fall wird die Spanne innerhalb des Absatzes zentriert. Das Fehlen einer Ausrichtung am Inhalt des Bereichs weist darauf hin, dass der Browser den Inhalt entsprechend seiner natürlichen Höhe wiedergibt, die geringer ist als die Höhe des Bereichs selbst.

Um die Fehlausrichtung zu beseitigen, können wir die vertikale Ausrichtung anpassen des Span-Inhalts durch Ändern seiner vertikalen Ausrichtung:

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

Das obige ist der detaillierte Inhalt vonWarum zentriert „vertical-align: middle' Inline-Inhalte nicht immer vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!