Wie erreichen „Elemente“ eine vertikale Textausrichtung ohne explizite „Zeilenhöhe“?

Die rätselhafte vertikale Ausrichtung in Elemente

In der Welt der Webentwicklung ist die Das Element verwirrt uns oft mit seiner scheinbar magischen Fähigkeit, den Text vertikal zentriert zu halten. Um dieses Rätsel zu lösen, analysieren wir einen Ausschnitt aus HTML und CSS:

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

In diesem Szenario wird der Text in der Das Element bleibt zentriert, obwohl keine explizite Eigenschaft für die Zeilenhöhe vorhanden ist.

Eintauchen in die Magie des Browsers

Bei der Untersuchung der Darstellung des Browsers entdecken wir ein darin verschachteltes verstecktes Element die Etikett. In Firefox heißt es moz-button-content. Dieses Element ist im User-Agent-Stylesheet des Browsers wie folgt definiert:

<code class="css">*|*::-moz-button-content {
  display: block;
}</code>

Dieses versteckte Element spielt eine entscheidende Rolle bei der vertikalen Zentrierung des Textes. Es ist so eingestellt, dass es als Blockelement angezeigt wird, wodurch das Element die gesamte verfügbare Höhe der Schaltfläche einnimmt. Innerhalb dieses Elements wird der Text natürlich in der Mitte ausgerichtet.

Die hartcodierte vertikale Positionierung

Dies ist jedoch nicht die ganze Geschichte. Browser verwenden ein zusätzliches fest codiertes Verhalten für

Elemente:

<code class="cpp">// Center child in the block-direction in the button
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);</code>

Dieser Code zeigt, dass Browser absichtlich zusätzlichen Platz auf beiden Seiten des Texts im moz-button-content-Element hinzufügen und ihn so effektiv vertikal zentrieren.

Platzieren Alles zusammen

Zusammenfassend lässt sich sagen, dass die vertikale Ausrichtung in

-Elemente entstehen durch zwei Faktoren:

• Das Vorhandensein des moz-button-content-Elements, das den Text als Block anzeigt und ihn natürlich in der Mitte ausrichtet.
• Das Hard- codiertes Browserverhalten, das das moz-button-content-Element innerhalb der Schaltfläche weiter zentriert.

Das obige ist der detaillierte Inhalt vonWie erreichen „Elemente“ eine vertikale Textausrichtung ohne explizite „Zeilenhöhe“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!