Lösung für das Problem der ungültigen Zeilenhöheneinstellung in CSS

Über die ungültige Zeilenhöheneinstellung in CSS

Schreiben wir zunächst diese Codezeichenfolge:

<!DOCTYPE html>
<html lang="de">
<Kopf>
	<meta charset="UTF-8">
	<title>Dokument</title>
	<style type="text/css">
		.Kopf{
			Höhe: 100px;
			Textausrichtung: zentriert;
			line-height: 100px;/* Stellen Sie die Zeilenhöhe so ein, dass die Schrift zentriert ist*/
			Hintergrund: #333;/* Setzen Sie den gesamten Hintergrund auf Schwarz, damit die Schrift besser zu erkennen ist*/
			Farbe: rot;
			font:700 18px simsun;/* Schriftart festlegen*/
		}
	</Stil>
</Kopf>
<Text>
	<div Klasse="Kopf">
		Hallo, Southwest Petroleum University.
	</div>
</body>
</html>

Öffnen Sie es dann im Browser, um den Effekt zu sehen:

Wir haben festgestellt, dass die Schrift in vertikaler Richtung nicht in der Mitte der Box angezeigt wird.

Dann setzen wir die Anweisung, die die Zeilenhöhe festlegt, unter die Anweisung, die die Schriftart festlegt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
	<meta charset="UTF-8">
	<title>Dokument</title>
	<style type="text/css">
		.Kopf{
			Höhe: 100px;
			Textausrichtung: zentriert;
			Hintergrund: #333;/* Setzen Sie den gesamten Hintergrund auf Schwarz, damit die Schrift besser zu erkennen ist*/
			Farbe: rot;
			font:700 18px simsun;/* Schriftart festlegen*/
			line-height: 100px;/* Zeilenhöhe festlegen*/
		}
	</Stil>
</Kopf>
<Text>
	<div Klasse="Kopf">
		Hallo, Southwest Petroleum University.
	</div>
</body>
</html>

Öffnen Sie es dann mit Ihrem Browser:

Die Schriftart ist erfolgreich in die Mitte gesprungen~~~~~

Zusammenfassung: Beim Festlegen der Zeilenhöhe mit CSS muss das Zeilenhöhenattribut unterhalb der Schriftart liegen, sonst ist es ungültig!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: JavaScript zum Erzielen eines Lupeneffekts

>>: Beispiel für die Installation und Bereitstellung von Docker unter Linux

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Lösung für das Problem der ungültigen Zeilenhöheneinstellung in CSS

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Detaillierte Erklärung zur Verbindung mit einer MySQL-Datenbank mit Java in IntelliJ IDEA

Probleme bei der Installation von TensorRT im Docker-Container

Detaillierte Erläuterung von zwei Möglichkeiten zum dynamischen Ändern von CSS-Stilen in React

MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode

So optimieren Sie die MySQL-Abfragegeschwindigkeit

Einige Vorschläge zur Gewährleistung der MySQL-Datensicherheit

Was Sie beim Gestalten von Webseiten für Mobilgeräte mit kleinem Bildschirm beachten sollten

So implementieren Sie das mobile Anmelde- und Registrierungsmodul elegant in vue3

Analyse des rel-Attributs in HTML

Artikel empfehlen

Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux

Wie kann man dafür sorgen, dass Leerzeichen in IE und FF die gleiche Breite haben?

MySQL-Leistungsoptimierungs-Index-Pushdown

So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS

HTML-Seite unterstützt die Implementierung des Dunkelmodus

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Centos8 (Minimalinstallation) Tutorial zur Installation von Python3.8+pip

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

Detaillierte Erläuterung des Docker-Datensicherungs- und Wiederherstellungsprozesses

So stellen Sie Confluence und Jira-Software in Docker bereit

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen

Verwendung des Linux-SFTP-Befehls