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

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

Unser Versuch, den Text vertikal zu zentrieren, bleibt wirkungslos. Wir haben den Code geändert in

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

Implementierung von Redis mit einem Master, zwei Slaves und drei Sentinels basierend auf Docker

Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

Artikel

Detaillierte Erklärung zum Kompilieren und Installieren von MySQL 5.6 auf CentOS und zum Installieren mehrerer MySQL-Instanzen

Artikel

Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird

Detaillierte Erklärung der Lösung für das Problem, dass die Schrift in HTML selbst mit line-height nicht vertikal zentriert werden kann

Implementierung von Redis mit einem Master, zwei Slaves und drei Sentinels basierend auf Docker

JS beherrscht schnell die Verwendung von ES6-Klassen

Sollten nullbare Felder in MySQL auf NULL oder NOT NULL gesetzt werden?

Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

Detaillierte Erklärung zum Kompilieren und Installieren von MySQL 5.6 auf CentOS und zum Installieren mehrerer MySQL-Instanzen

Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird

Darstellung des Vorgangs zur Verwendung von FileZilla zur Verbindung mit dem FTP-Server

Kommentare auf Webseiten verursachen Textüberlauf im Internet Explorer

Grundlegende Nutzungsdetails zur Vue-Komponentenbildung

Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript

Artikel empfehlen

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

Implementierung eines laufenden Springboot-Projekts mit Docker

Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten

So erstellen Sie einen Index für eine Join-Tabelle in MySQL

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Detaillierte Erläuterung zum Erstellen einer Ansicht (CREATE VIEW) und zu Nutzungsbeschränkungen in MySQL

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

Detaillierte Schritte zum Konfigurieren virtueller Hosts in nginx

Probleme mit Join-Abfragen und Unterabfragen in MySQL

Beispiel für die Verwendung einer Keep-Alive-Komponente in Vue

Der Unterschied zwischen br und br/ in HTML

Diagramm der Installationsschritte für MySQL 8.0.11 Community Green Edition für Windows

So spielen Sie lokale Mediendateien (Video und Audio) mit HTML und JavaScript ab

Installationsschritte und Tutorial zur grundlegenden Verwendung von MySQL 8.0.12 unter Windows

mysql5.7 Installations- und Konfigurationstutorial unter Centos7.3