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