Wie zentriere ich die Schriftart in CSS?-CSS-Tutorial-php.cn

Wie zentriere ich die Schriftart in CSS?

青灯夜游

Freigeben： 2019-05-23 18:52:49

Original

46976 Leute haben es durchsucht

Wie zentriere ich die Schriftart in CSS? Der folgende Artikel wird es Ihnen vorstellen und ich hoffe, dass er Ihnen hilfreich sein wird.

Wie zentriere ich die Schriftart in CSS?

1. CSS legt fest, dass die Schriftart horizontal zentriert ist

Sie können die Textausrichtung verwenden Attribut in CSS, um die Schriftart so festzulegen, dass sie horizontal zentriert wird. Diese Eigenschaft gibt die horizontale Ausrichtung des Texts innerhalb des Elements an, indem der Mittelwert zum Zentrieren des Texts verwendet wird.

text-align ist ein grundlegendes Attribut, das beeinflusst, wie Textzeilen innerhalb eines Elements aneinander ausgerichtet werden. Die Werte „left“, „right“ und „center“ bewirken, dass der Text im Element linksbündig, rechtsbündig bzw. zentriert ist. Wenn Sie den Text zentrieren möchten, verwenden Sie einfach „center“.

Dieses Attribut legt die Zentrierung einiger Inline-Objekte (oder ähnlicher Elemente) wie Text- und IMG-Tags fest.

Dieses Attribut hat die folgenden Eigenschaften:

1) Die Mitte der Textausrichtung wird auf einen Container angewendet. Sie zielt nur auf den Text im Container und die Anzeige im Container als Inline- oder Inline. -Container blockieren. Wenn die Anzeige des Containers darin blockiert ist, wird der Inhalt des Containers darin nicht zentriert.

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.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 水平居中</title>
		<style>
			.box {
				width: 400px;
				height: 100px;
				background: #ddd;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">css 水平居中了--文本文字</div>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie zentriere ich die Schriftart in CSS?

2. CSS legt die Schriftart so fest, dass sie vertikal zentriert ist

1. Das Attribut „line-height“ sorgt dafür, dass der Text vertikal zentriert wird – einzeilige Schriftart

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

Nach dem Login kopieren

Rendering:

Wie zentriere ich die Schriftart in CSS?

Dadurch wird der Text im Div horizontal und vertikal zentriert

2. CSS3-Flex-Layout zum vertikalen Zentrieren von Text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    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>

Nach dem Login kopieren

Rendering:

Wie zentriere ich die Schriftart in CSS?

3 + display:table-cell Den Text vertikal zentrieren

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background: #ddd;
				vertical-align:middle;
				display:table-cell;
			}
		</style>

	</head>

	<body>

		<div class="box">css 水平居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>

	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie zentriere ich die Schriftart in CSS?

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

Das obige ist der detaillierte Inhalt vonWie zentriere ich die Schriftart in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!