Nehmen wir als Beispiel den im Bild gezeigten Effekt. Offensichtlich müssen wir den Text „Weiter“ nicht nur horizontal, sondern auch vertikal zentrieren. Zu diesem Zeitpunkt schreiben wir den Code wie folgt:
Unser Versuch, den Text vertikal zu zentrieren, bleibt wirkungslos. Wir haben den Code geändert in
Detaillierte Erklärung der Lösung für das Problem, dass die Schrift in HTML selbst mit line-height nicht vertikal zentriert werden kann
|
von
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
#Weiter-Schaltfläche{
Höhe: 54px;
Textausrichtung: zentriert;
Farbe: #fff;
Hintergrund: #e2231a;
Zeilenhöhe: 54px;
Schriftart: 16px „Microsoft YaHei“, „Hiragino Sans GB“;
Cursor: Zeiger;
Rand: 0 automatisch;
Breite: 400px;
}
</Stil>
</Kopf>
<Text>
<div id="next-button">Weiter</div>
</body>
</html>Darin legen wir Breite, Höhe, Hintergrundfarbe, Schriftart sowie horizontale und vertikale Zentrierung fest, erhalten jedoch diesen Effekt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
#Weiter-Schaltfläche{
Breite: 400px;
Höhe: 54px;
Textausrichtung: zentriert;
Farbe: #fff;
Hintergrund: #e2231a;
Schriftart: 16px/54px „Microsoft YaHei“, „Hiragino Sans GB“;
Cursor: Zeiger;
Rand: 0 automatisch;
}
</Stil>
</Kopf>
<Text>
<div id="next-button">Weiter</div>
</body>
</html>, es kann vertikal zentriert werden. Der Grund hierfür ist, dass, wenn Zeilenhöhe und Schriftart in der Liste der Stildeklarationen enthalten sind, die Zeilenhöhe ungültig ist und zusammen mit der Schriftart verwendet werden muss. Solange in der Stildeklaration keine Schriftart angegeben ist, können Sie mithilfe der Zeilenhöhe die vertikale Mitte des Textes festlegen. Damit ist dieser Artikel über die Lösung des Problems abgeschlossen, dass Schriftarten in HTML auch nach Verwendung der Zeilenhöhe nicht vertikal zentriert werden können. Weitere Informationen dazu, dass die Zeilenhöhe nicht vertikal zentriert werden kann, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Die neue CSS-Funktion enthält Probleme beim Neuzeichnen und Neuanordnen von Steuerelementen.
>>: Kurze Einführung und Verwendung von Table und div
Artikel empfehlen
Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile
Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...
Hinweise zur Verwendung des Blockquote-Tags
<br />Semantisierung lässt sich nicht mit we...
Zusammenfassung der Namenskonventionen für HTML und CSS
CSS-Benennungsregeln Header: Header Inhalt: Inhalt...
Eine vollständige Liste häufig verwendeter Linux-Befehle (empfohlene Sammlung)
Inhaltsverzeichnis 1. Systeminformationen 2. Shut...
Die beste Lösung zum Zurücksetzen des Root-Passworts von MySQL 8.0.23
Diese Methode wurde am 7. Februar 2021 bearbeitet...
Detaillierte Erläuterung des Aufbaus und der Schnittstellenverwaltung des Docker Private Warehouse
1. Über die Registrierung Der offizielle Docker-H...
Tipps zur Implementierung von Listenschleifen-Scrollen basierend auf jQuery (super einfach)
Ich habe eine gute Idee gesehen und sie aufgezeic...
Ausführliche Erläuterung der verschiedenen Methoden sowie der Vor- und Nachteile der JavaScript-Vererbung
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte
Lassen Sie uns keine weitere Zeit verschwenden un...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Tutorial erfahren Sie alles über die In...
Verlustfreie Erweiterungsmethode unter Linux
Überblick Der Server des Cloud-Plattform-Kunden k...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64
Ich habe erst vor Kurzem angefangen, mich mit Dat...
Detaillierte Erklärung des HTML-Bereichs-Tags
Der <area>-Tag definiert einen Bereich in e...
Verschönerung der Dualsystem-Boot-Schnittstelle für Win10 + Ubuntu20.04 LTS
Effektanzeige Die eingebaute Boot-Oberfläche ist ...