Warum ist der Schaltflächentext standardmäßig vertikal zentriert, der Div-Text jedoch nicht?

Informationen zur vertikalen Ausrichtung von Schaltflächentexten

Berücksichtigen Sie die folgenden HTML-Markup- und CSS-Stile:

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

Wenn Sie diese Stile anwenden, Sie bemerken, dass der Text innerhalb der -Element vertikal ausgerichtet ist, wohingegen der Text innerhalb des

ist nicht.

Die geheimnisvolle Magie

Standardmäßig ist Elemente verfügen über ein integriertes Element namens moz-button-content. Auf dieses Element kann nicht über CSS zugegriffen werden. Es zeigt einen Block an und erbt die Höhe der Schaltfläche. Der interne Code des Browsers enthält jedoch eine hartcodierte Regel, die den Inhalt der Schaltfläche vertikal in der Mitte des moz-button-content-Elements positioniert.

Zentrieren von Text in einem Div

The Die Eigenschaft -webkit-box-align funktioniert nicht zum Zentrieren von Text in einem

weil

Elemente verfügen nicht über ein integriertes Element wie moz-button-content. Um Text in einem

zu zentrieren, können Sie die Zeilenhöhe verwenden, die der Höhe des Div entspricht.

Fazit

Die vertikale Zentrierung von Text innerhalb von

wird durch eine Kombination des moz-button-content-Elements und der hartcodierten vertikalen Positionierungsregel des Browsers verursacht. Im Gegensatz dazu ist das Zentrieren von Text in

Elemente erfordern die Verwendung von line-height.

Das obige ist der detaillierte Inhalt vonWarum ist der Schaltflächentext standardmäßig vertikal zentriert, der Div-Text jedoch nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Warum erbt ein absolut positioniertes Element innerhalb eines relativ positionierten Elements seine Position von seinem unmittelbaren übergeordneten Element? Nächster Artikel：Wie gestaltet man das „mat-select“-Panel in eckigem Material effektiv?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2579

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2717

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2304

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

2159

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

2269

verwandte Themen

Mehr>

• Wo ist der Login-Zugang für Gmail-E-Mail?
• Einführung in die Methode zum Abfangen von Zeichenfolgen in js
• Ist die Matcha-Plattform formell?
• Was sind die Befehle zum Herunterfahren von Linux?
• Zählt Hongmeng OS als Android?
• So beheben Sie einen DNS-Auflösungsfehler
• Einführung in die Inarray-Nutzung
• Ist A5-Papier größer oder B5-Papier größer?