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

Detaillierte Erläuterung der MySQL-Multitabellen-Joinabfrage

Artikel

Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.

Artikel

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

Detaillierte Erläuterung der MySQL-Multitabellen-Joinabfrage

Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.

Einführung und Architektur von Apache Arrow, einem leistungsstarken Datenformatbibliothekspaket auf JVM (Gkatziouras)

Ubuntu16.04 Installation mysql5.7.22 Grafik-Tutorial

Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3

Detaillierte Erläuterung der Verwendung von Docker-Tag und Docker-Push

6 Möglichkeiten, die Maximal- und Minimalwerte eines Arrays in Javascript zu implementieren

Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17

Fallstudie zum JavaScript DOMContentLoaded-Ereignis

CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen

Artikel empfehlen

Detaillierte Erklärung des EXPLAIN-Befehls und seiner Verwendung in MySQL

Detaillierte Erläuterung der MySQL 8.0-Wörterbuchtabellenerweiterung

So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden

Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks

Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

So verwenden Sie Docker zum lokalen Verpacken und Bereitstellen von Images

Analyse der Implementierung der Nginx Rush-Kaufstrombegrenzungskonfiguration

Einige einfache Implementierungscodes des Formularelements nehmen die Registrierung als Beispiel

So ziehen Sie das Docker-Image herunter, um die Version anzuzeigen

js implementiert Array-Abflachung

Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular

Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen

Der Unterschied zwischen MySQL count(1), count(*) und count(field)

Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue

So installieren Sie Docker auf Raspberry Pi