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
Artikel empfehlen
js, um den Zahlungs-Countdown zu realisieren und zur Startseite zurückzukehren
Zahlungs-Countdown, um zur Startseite zurückzukeh...
Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen
In diesem Artikel wird der spezifische Code zur I...
Wertschätzung des dezenten und eleganten Webdesigns in Schwarz, Weiß und Grau
Unter den klassischen Farbkombinationen kann wohl...
JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
1. Warum diesen Artikel schreiben? Sie haben sich...
Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)
Inhaltsverzeichnis 1. Requisiten Übergeordnetes E...
Detaillierte Erläuterung der spezifischen Verwendung der ENV-Anweisung in Dockerfile
1. Die ENV-Anweisung im Dockerfile wird verwendet...
Die am häufigsten verwendete HTML-Escape-Sequenz
In HTML haben <, >, & usw. eine speziell...
Implementierung der Nginx-Konfiguration des lokalen Image-Servers
Inhaltsverzeichnis 1. Einführung in Nginx 2. Aufb...
HTML-Tabellen-Tag-Tutorial (7): Hintergrundfarbattribut BGCOLOR
Die Hintergrundfarbe der Tabelle kann über das At...
Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen
Sie werden oft HTML mit Datenattributen sehen. Die...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...
Implementierung der Vue-Anmeldefunktion
Inhaltsverzeichnis Vorne geschrieben Anmeldeübers...
Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet
Die automatische Inkrementierung der Primärschlüs...
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für das Problem, dass die Umleitung der Crontab-Ausgabe unter Linux nicht wirksam wird
Frage Unter LINUX werden periodische Aufgaben nor...