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
Schritte zum Aufteilen und Komprimieren von CSS mit Webpack und zum Importieren mit Link
Schauen wir uns zunächst die Codedateistruktur an...
Lösen Sie das chinesische verstümmelte Problem der MySQL5.5-Datenbank-Befehlszeile unter Windows 10
Nach dem Zurücksetzen des Systems hatte die MySQL...
Unterschiede und Anwendungsbeispiele von for, for...in, for...of und forEach in JS
for-Schleife Grundlegendes Syntaxformat: für (Var...
Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript
Derzeit gibt es viele Betriebsaktivitäten für öff...
Vue verwendet drei Methoden zum Aktualisieren der Seite
Beim Schreiben von Projekten stoßen wir häufig au...
Detaillierte Erläuterung der Ideen zur Fehlerbehebung bei PHP+nginx-Dienstfehlern 500 502
Überblick Wenn beim Zugriff auf einen Onlinediens...
Detaillierte Erklärung zur Installation von MySQL in der Alibaba Cloud
Als leichte Open-Source-Datenbank wird MySQL häuf...
Tutorial zur Installation und Konfiguration des mysql8.0-ZIP-Pakets für Windows x64
Zip-Installationsschritte für die MySQL 8-Windows...
Anfänger lernen einige HTML-Tags (3)
Anfänger, die mit HTML in Berührung kommen, lerne...
HTML-Tabellen-Tag-Tutorial (19): Zeilen-Tag
Die Attribute des <TR>-Tags werden verwende...
Mehrere magische Verwendungen des JS ES6 Spread-Operators
Inhaltsverzeichnis 1. Attribute hinzufügen 2. Meh...
Sqoop-Exportkarte100 % reduzieren0 % steckt aus verschiedenen Gründen und Lösungen fest
Ich nenne diese Art von Fehler einen typischen „H...
Eine benutzerfreundliche Alternative in Linux (Befehl fd)
Der Befehl fd bietet eine einfache und unkomplizi...
Tipps zur MySQL-Leistungsoptimierung
MySQL-Leistungsoptimierung MySQL wird in Internet...
Dieser Artikel zeigt Ihnen, was Vite mit der Anfrage des Browsers macht
Inhaltsverzeichnis Funktionsprinzip: Was macht de...