Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So legen Sie die horizontale Ausrichtung in CSS fest

青灯夜游
Freigeben: 2023-01-03 09:24:49
Original
10086 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-TutorialSo 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!