Heim  >  Artikel  >  Web-Frontend  >  Was ist der Stil der HTML-Textzentrierung?

Was ist der Stil der HTML-Textzentrierung?

青灯夜游
青灯夜游Original
2021-02-22 14:48:1718597Durchsuche

HTML-Textzentrierungsstil: 1. Der horizontale Zentrierungsstil ist „text-align: center;“; 2. Der vertikale Textzentrierungsstil ist „line-height:px value;“; ;" align-items: center;".

Was ist der Stil der HTML-Textzentrierung?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML-Textzentrierung

1. Text horizontal zentriert – text-align: center;

text-align-Attribut gibt die horizontale Ausrichtung des Textes im Element an.

Dieses Attribut legt die horizontale Ausrichtung von Text innerhalb von Elementen auf Blockebene fest, indem es den Punkt angibt, an dem das Linienfeld ausgerichtet wird. Der Wert justify wird dadurch unterstützt, dass Benutzeragenten den Abstand zwischen Buchstaben und Wörtern im Zeileninhalt anpassen können. Verschiedene Benutzeragenten können zu unterschiedlichen Ergebnissen führen.

Wert Beschreibung
links Text links anordnen. Standard: Wird vom Browser bestimmt.
rechts Text rechts anordnen.
Mitte Ordnen Sie den Text in der Mitte an.
justify Erzielen Sie den Effekt, dass der Text an beiden Enden ausgerichtet wird.
inherit gibt an, dass der Wert des text-align-Attributs vom übergeordneten Element geerbt werden soll.

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			h1 {
				text-align: center
			}
			
			h2 {
				text-align: left
			}
			
			h3 {
				text-align: right
			}
		</style>
	</head>

	<body>
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
	</body>

</html>

Rendering:

Was ist der Stil der HTML-Textzentrierung?

[Empfohlene Tutorials: CSS-Video-Tutorial, „HTML-Video-Tutorial“]

2. Text vertikal zentriert

1 ) , line-height macht den einzeiligen Text vertikal zentriert

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: palegoldenrod;
			    line-height:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中了--文本文字</div>
	</body>
</html>

Rendering:

Was ist der Stil der HTML-Textzentrierung?

2), das Flex-Layout von CSS3 macht den Text vertikal zentriert

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: paleturquoise;
			    line-height:300px;
			     /*设置为伸缩容器*/
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    /*垂直居中*/
			    -webkit-box-align: center;/*旧版本*/
			    -moz-box-align: center;/*旧版本*/
			    -ms-flex-align: center;/*混合版本*/
			    -webkit-align-items: center;/*新版本*/
			    align-items: center;/*新版本*/
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中--文本文字(弹性布局)</div>
	</body>
</html>

Was ist der Stil der HTML-Textzentrierung?

Weitere programmierbezogene Kenntnisse finden Sie unter:

Programmiervideo ! !

Das obige ist der detaillierte Inhalt vonWas ist der Stil der HTML-Textzentrierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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