Ist es möglich, Text in seiner Bounding Box vertikal zu zentrieren?

Question

Mein Text ist nicht vertikal zentriert und meine Designer weisen darauf hin.

Allerdings verwende ich die richtige CSS, um vertikale Zentrierung zu erreichen, das ist nicht das Problem.

Das Problem liegt in der Schriftart selbst. Die Glyphen sind nicht im eigentlichen Text zentriert. Wenn Sie den Text auswählen, wird sein Begrenzungsrahmen angezeigt, und von hier aus kann ich einen ungleichmäßigen Abstand unter dem Text sehen.

line-height nicht erscheint dieses Problem zu beheben. Die Begrenzungsbox ist immer noch deaktiviert, selbst bei einer Zeilenhöhe von 0. Ich kann am oberen Rand meiner Elemente ein Padding hinzufügen, um dieses Problem zu beheben, aber das wird nicht auf die vielen Elemente skalierbar sein, die diese Schriftart verwenden.

Es scheint, dass der unebene Raum wegen der Unterlängen ist. Das macht Sinn, aber leider bringt es mich nicht näher herauszufinden, wie man diesen Text wirklich vertikal zentriert.

Die Schrift in Frage SouvenirStd-Medium, aber ich habe dies mit vielen anderen Web-Fonts bemerkt. Es ist konsequent aus, egal welches Element verwendet wird ... h1 die Absatz-Tags usw.

Obwohl es wahrscheinlich nicht sinnvoll sein, hier ist ein Beispiel meiner Stile für Schlagzeilen:

font-family: SouvenirStd-Medium; 
font-size: 5rem; 
font-weight: 400; 
font-style: normal; 
line-height: 1.3; 
letter-spacing: 0; 

Und ein Beispiel Wie zentriere ich meinen Text in einem Wrapping-Tag.

div { 
    display: flex; 
    height:100px; 
    align-items: baseline; 
} 

Answer 1

Zeilenhöhe wird das Problem nicht helfen, da er oder subtrahiert nach oben und unten auf einer einzigen Textzeile gleich viel Platz fügt, bezogen auf den oberen und unteren Abstand in der Schrift selbst definiert (siehe line-height description at w3c für weitere Informationen). Dies bedeutet, dass Sie eine andere Schriftart finden müssen, um zu bekommen, was Sie wollen, ohne Ihnen aus dem Weg zu gehen.

padding-top oder padding-bottom funktionieren gut, wenn Sie em als die Einheit verwenden, die relativ zur Gesamthöhe des Briefes ist (einschließlich der oben und unten Leerzeichen).Das ermöglicht es Ihnen, Text von der gleichen relativen Betrag auf der anderen gesamten Webseite, unabhängig von der Schriftgröße zu verschieben (und Sie line-height von dort verwenden können, Abstand zwischen den einzelnen Linien zu verwalten):

.font-timesnewroman { 
    font-family: 'Times New Roman', serif; 
    padding-top: 0.1em; 
} 

---

Angepasst von einem Hack, den ich in this blog post gefunden, hier ist eine mögliche Lösung, wenn die oben nicht für Sie arbeiten (noch auch ein bisschen eng in Anwendung):

div { 
 
    height: 100px; 
 
    margin-top: 40px; 
 
    border: thin dotted gray; 
 
    text-align: center; 
 
} 
 
.text { 
 
    font-size: 100px; 
 
    line-height: 0px; 
 
    background-color: #9BBCE3; 
 
} 
 
.text::after { 
 
    content:''; 
 
    display: inline-block; 
 
    height: 80%; /* adjust this to shift the text */ 
 
}

<div> 
 
    <span class="text">Test</span> 
 
</div>

Dies hat folgende Merkmale und Einschränkungen:

• Werke für Elemente der oben genannte Lösung funktioniert zum Beispiel nicht, weil die Elemente Sie versuchen, bereits die einzustellen Sie eine Polsterung
• ermöglicht haben, um Stil Baseline mit Prozentsatz oder em-Werten (so dass sie mit font-size tun Skala)
• halb implementierbar mit der After-Selektor erfordert jedoch eine Spanne (oder anderes Inline-rendered) Element um den Text
• nur Werke positioniert werden für Non-Wrapping-Linien