Quel est le style de centrage du texte HTML ?-tutoriel HTML-php.cn

Quel est le style de centrage du texte HTML ?

青灯夜游

Libérer： 2023-01-03 09:24:21

original

18640 Les gens l'ont consulté

Style de centrage du texte HTML : 1. Le style de centrage horizontal est "text-align: center;" 2. Le style de centrage vertical du texte est "line-height:px value;"; " display: flex; align-items: center;".

Quel est le style de centrage du texte HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

texte HTML centré

1. Texte centré horizontalement--text-align: center;

texte L'attribut -align spécifie l'alignement horizontal du texte dans un élément.

Cet attribut définit l'alignement horizontal du texte dans un élément de niveau bloc en spécifiant le point auquel la zone de ligne est alignée. La valeur justifier est prise en charge en permettant aux agents utilisateurs d'ajuster l'espacement entre les lettres et les mots dans le contenu de la ligne ; différents agents utilisateurs peuvent obtenir des résultats différents ;

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

Exemple :

<!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>

Copier après la connexion

Rendu :

Quel est le style de centrage du texte HTML ?

[Tutoriel recommandé : Vidéo CSS tutoriel , "tutoriel vidéo HTML "]

2. Centrer le texte verticalement

1), la hauteur de ligne crée un texte sur une seule ligne. Centré verticalement

<!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>

Copier après la connexion

Image d'effet :

Quel est le style de centrage du texte HTML ?

2), la disposition flexible de CSS3 rend le texte centré verticalement

<!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>

Copier après la connexion

Quel est le style de centrage du texte HTML ?