Heim >Web-Frontend >CSS-Tutorial >So zentrieren Sie Text in CSS
So zentrieren Sie Text in CSS
- 青灯夜游Original
- 2021-04-20 17:18:4726647Durchsuche
Methoden zum Zentrieren von Text: 1. Verwenden Sie die Anweisung „text-align:center;“, um die horizontale Zentrierung festzulegen. 2. Verwenden Sie das Flex-Layout von CSS3, um die vertikale Zentrierung festzulegen. cell; ”-Anweisung legt die vertikale Zentrierung fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
css legt fest, dass der Text horizontal zentriert ist.
In CSS können Sie das text-align-Attribut verwenden, um die Schriftart so festzulegen, dass sie horizontal zentriert ist. Diese Eigenschaft gibt die horizontale Ausrichtung des Texts innerhalb des Elements an, indem der Mittelwert zum Zentrieren des Texts verwendet wird.
text-align-Syntax:
text-align : left | right | center | justify
text-align-Parameterwert und -beschreibung:
left: linke Ausrichtung
right: rechte Ausrichtung
-
center: Mitte
-
begründen: Beide Enden ausrichten (nicht empfohlen, wird normalerweise von den meisten Browsern nicht verwendet)
Unsere häufig verwendeten Parameterwerte für die Textausrichtung sind links, rechts, zentriert
Dieses Attribut hat die folgenden Eigenschaften:
1) , Die Mitte der Textausrichtung wird nur auf den Text im Container und den Container angewendet, dessen Anzeige inline oder inline-block ist. Wenn die Anzeige des Containers darin blockiert ist, wird dies der Fall sein nicht zentriert sein.
2) Text-align ist nach unten transitiv und wird weiterhin an untergeordnete Elemente weitergegeben. Wenn Sie ein Div festlegen, wird der Inhalt seiner untergeordneten Divs ebenfalls zentriert. ??
1 , CSS3-Flex-Layout verwendet Zentrieren Sie den Text vertikal.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: palegoldenrod;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css文本文字--水平居中</div>
</body>
</html>. align:middle +display:table-cell kann sowohl einzeiligen als auch mehrzeiligen Text zentrieren. Da es sich bei „table-cell“ jedoch um einen Inline-Typ handelt, werden die ursprünglichen Elemente auf Blockebene pro Div in dieselbe Zeile verschoben. Wenn Sie die Reihen in zwei Reihen unterteilen müssen, müssen Sie außen einen zusätzlichen Behälter hinzufügen, um die Position zu kontrollieren.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
! !
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!