So zentrieren Sie Text in CSS-CSS-Tutorial-php.cn

So zentrieren Sie Text in CSS

青灯夜游

Freigeben： 2023-01-05 16:10:09

Original

26479 Leute haben es durchsucht

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.

So zentrieren Sie Text in CSS

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

. 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:

Programmiervideos

! ! So zentrieren Sie Text in CSS

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!