Ich weiß, um Text vertikal an der Mitte eines Blocks auszurichten, setzen Sie die Zeilenhöhe auf die gleiche Höhe des Blocks.
Wenn ich jedoch einen Satz mit einem Wort in der Mitte habe, ist das so 2em
. Wenn der gesamte Satz eine Zeilenhöhe hat, die der des enthaltenden Blocks entspricht, wird der größere Text vertikal ausgerichtet, der kleinere Text befindet sich jedoch auf derselben Grundlinie wie der größere Text.
Wie kann ich festlegen, dass beide Textgrößen vertikal ausgerichtet sind, sodass der größere Text auf einer Grundlinie liegt, die niedriger als der kleinere Text ist?
quelle
vertical-align: middle
war fürtable-cell
‚nur s!Die angezeigte Funktionalität ist korrekt, da die Standardeinstellung für "Vertikalausrichtung" die Grundlinie ist. Es scheint, dass Sie wollen
vertical-align:top
. Es gibt andere Möglichkeiten. Siehe hier bei W3Schools .Bearbeiten W3Schools hat ihre Handlung nicht aufgeräumt und scheint immer noch eine schlechte (bestenfalls) Informationsquelle zu sein. Ich benutze jetzt Sitepoint . Scrollen Sie zum Ende der Sitepoint-Startseite, um auf deren Referenzabschnitte zuzugreifen.
quelle
Die beiden Textsätze müssen dieselbe feste Zeilenhöhe und dieselbe vertikale Ausrichtung haben
quelle
Sie können dies jedoch technisch nicht tun, wenn Sie feste Textgrößen haben. Sie können die Positionierung (relativ) verwenden, um den größeren Text nach unten zu verschieben und die Zeilenhöhe auf den kleineren Text einzustellen (ich gehe davon aus, dass dieser größere Text als solcher markiert ist Sie können dies also als CSS-Auswahl verwenden.
quelle
Sie können Prozentgrößen verwenden, um die übergeordneten Größen erneut anzuwenden
line-height
quelle
Eine Option besteht darin, eine Tabelle zu verwenden, in der sich die unterschiedlich großen Texte in ihren eigenen Zellen befinden, und Align: Middle für jede Zelle zu verwenden.
Es ist nicht schön und funktioniert nicht für alle Gelegenheiten, aber es ist einfach und funktioniert mit jeder Textgröße.
quelle
Das funktioniert
quelle
Einfacher Weg - Flex verwenden:
quelle