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

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

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

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Implementierung der Bereitstellung des Nginx+ModSecurity-Sicherheitsmoduls

Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

Detaillierte Erklärung von count(), group by, order by in MySQL

Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

Grafisches Tutorial zur Installation von MySQL5.7.18 im Windows-System

So verwenden Sie CSS-Variablen in JS

Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

Artikel empfehlen

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

Lernen wir JavaScript objektorientiert kennen

MySQL Serie 3 Grundlagen

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

MySQL Best Practices: Grundlegende Arten von Partitionstabellen

So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung

MySQL 5.6-Binärinstallationsprozess unter Linux

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Implementieren einer verteilten Sperre mit MySQL

Vue verwendet Monaco, um Codehervorhebung zu erreichen

jQuery implementiert Akkordeoneffekte

JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board

Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts

3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen

Detailliertes Tutorial zur Anmeldung am System mit dem Root-Benutzer in der neuen Version von Ubuntu 20.04