So stellen Sie die Schriftart so ein, dass sie in CSS zentriert wird

Das Festlegen der Schriftzentrierung in CSS ist für die Webtypografie sehr wichtig, insbesondere beim Übergang vom responsiven Design zum Design mobiler Geräte. Auf Webseiten müssen wir häufig die Schriftarten von Titeln, Absätzen, Navigationsmenüs und anderen Elementen zentrieren, um die Lesbarkeit und Ästhetik der Seite zu verbessern. Als Nächstes wird in diesem Artikel kurz erläutert, wie Sie CSS zum Zentrieren von Schriftarten verwenden.

1. Horizontale Zentrierung

In CSS gibt es mehrere Möglichkeiten, eine horizontale Zentrierung von Text zu erreichen. Diese Methoden werden im Folgenden vorgestellt:

1. text-align: center

Das text-align-Attribut steuert die Ausrichtung von Text, einschließlich linker Ausrichtung (links), rechter Ausrichtung (rechts), zentrierter Ausrichtung (Mitte) und verstreuter Ausrichtung . (Blocksatz) und Ausrichtung (Textblocksatz) usw. Um Text horizontal zu zentrieren, stellen Sie einfach die text-align-Eigenschaft des Elements ein, in dem sich der Text befindet, um ihn zu zentrieren.

Zum Beispiel:

Dies ist ein Titel

kann umgeschrieben werden als:

h1 {
text-align: center;
}

2. margin: auto

margin-Attribut wird verwendet, um die Ränder des Elements zu steuern, einschließlich oberer Rand, unterer Rand, linker Rand und rechter Rand. Wenn Sie sowohl den linken als auch den rechten Rand eines Elements auf „Automatisch“ einstellen, wird das Element horizontal zentriert.

Zum Beispiel:

h1 {
margin: auto;
}

2. Vertikale Zentrierung

Ohne Angabe einer Höhe ist die vertikale Zentrierung eines Elements schwierig zu erreichen. In einigen speziellen Fällen können wir jedoch dennoch eine vertikale Zentrierung von Elementen erreichen. Hier gibt es mehrere Methoden: Das Attribut „line-height“ legt die Zeilenhöhe fest, d. h. den Abstand zwischen den Zeilen. Wenn Sie die Zeilenhöhe auf die Höhe des Elements einstellen, wird der Text vertikal zentriert.

Zum Beispiel:
1. h1 {

height: 100px;

line-height: 100px;

}

flexbox


Flexbox ist ein neuer Layoutmodus in CSS3, der häufig im responsiven Design und im Design mobiler Geräte verwendet wird . Das Flexbox-Layout verwendet Flex-Container und Flex-Elemente, um ein adaptives und freies Layout von Elementen zu erreichen.

Um eine vertikale Zentrierung eines Elements zu erreichen, müssen Sie lediglich den Container, in dem sich das Element befindet, auf Flex einstellen und seine Eigenschaften „justify-content“ und „align-items“ auf „center“ setzen.
2. Zum Beispiel:

.container {

display: flex;

justify-content: center;

align-items: center;

}

Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, die Schriftzentrierung in CSS festzulegen Seitenlayout und eine geeignete Methode müssen gewählt werden. Obwohl der Artikel diese Methoden nur kurz vorstellt, sind diese Fähigkeiten und Wissenspunkte dennoch für das Webseitenlayout unerlässlich.

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Schriftart so ein, dass sie in CSS zentriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!