So legen Sie die horizontale Ausrichtung in CSS fest-CSS-Tutorial-php.cn

So legen Sie die horizontale Ausrichtung in CSS fest

青灯夜游

Freigeben： 2023-01-03 09:24:49

Original

10151 Leute haben es durchsucht

So legen Sie die horizontale Ausrichtung in CSS fest: 1. Verwenden Sie den Stil „text-align: center;“, um die horizontale Mittelausrichtung von Textelementen festzulegen. 2. Verwenden Sie den Stil „margin: auto;“, um die horizontale Mittelausrichtung festzulegen von Blockelementen.

So legen Sie die horizontale Ausrichtung in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Verwenden Sie das Attribut text-align: center;text-align: center;

text-align属性指定元素文本的水平对齐方式。

属性值：

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.center {
				text-align: center;
				border: 3px solid green;
			}
		</style>
	</head>

	<body>

		<h2>文本居中对齐</h2>

		<div class="center">
			<p>文本居中对齐。</p>
		</div>

	</body>

</html>

Nach dem Login kopieren

效果图：

So legen Sie die horizontale Ausrichtung in CSS fest

【推荐教程：CSS视频教程】

2、使用margin: auto;

text-align, um die horizontale Ausrichtung des Elementtextes anzugeben.

Attributwert:

left Ordnet den Text links an. Standard: Wird vom Browser bestimmt.
rechts Ordne den Text rechts an.
Mitte Ordnen Sie den Text in der Mitte an.

justify erreicht den Effekt, dass Text an beiden Enden ausgerichtet wird.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.center {
				margin: auto;
				width: 60%;
				border: 3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>

	<body>

		<h2>元素居中对齐</h2>

		<div class="center">
			<p>div 元素是居中的</p>
		</div>

	</body>

</html>

Nach dem Login kopieren

Rendering:

So legen Sie die horizontale Ausrichtung in CSS fest

【Empfohlenes Tutorial: CSS Video-Tutorial So legen Sie die horizontale Ausrichtung in CSS fest 】

2. Verwenden Sie das Kurzschriftattribut margin: auto;

🎜margin, um alle Randattribute in einer Anweisung festzulegen. 🎜🎜Attributwert: 🎜🎜🎜🎜🎜auto Der Browser berechnet die Ränder. 🎜🎜🎜🎜length gibt den Randwert in bestimmten Einheiten an, z. B. Pixel, Zentimeter usw. Der Standardwert ist 0px. 🎜🎜🎜🎜% Gibt Ränder als Prozentsatz der Breite des übergeordneten Elements an. 🎜🎜🎜🎜Um ein Element (z. B.

) horizontal zentriert auszurichten, können Sie margin: auto; verwenden. 🎜🎜Durch die Einstellung auf die Breite des Elements wird verhindert, dass es bis zum Rand des Behälters überläuft. 🎜🎜Das Element gibt die Breite an und verteilt die leeren Ränder gleichmäßig auf beiden Seiten. ! 🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie die horizontale Ausrichtung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!