Comment centrer le texte en CSS-tutoriel CSS-php.cn

Comment centrer le texte en CSS

青灯夜游

Libérer： 2023-01-05 16:10:09

original

26603 Les gens l'ont consulté

Méthodes de centrage du texte : 1. Utilisez l'instruction "text-align:center;" pour définir le centrage horizontal ; 2. Utilisez la disposition flexible de CSS3 pour définir le centrage vertical ; display: table-cell;" l'instruction définit le centrage vertical.

Comment centrer le texte en CSS

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

css définit le texte pour qu'il soit centré horizontalement

En CSS, vous pouvez utiliser l'attribut text-align pour définir la police pour qu'elle soit horizontale centré. Cette propriété spécifie l'alignement horizontal du texte dans l'élément, en utilisant la valeur centrale pour centrer le texte.

syntaxe d'alignement du texte :

text-align : left | right | center | justify

Copier après la connexion

valeur et description du paramètre d'alignement du texte :

gauche : gauche Aligner
à droite : Aligner à droite
centre : Centrer
justifier : Justifier les deux extrémités ( Non recommandé, généralement non utilisé par la plupart des navigateurs)

Nos valeurs de paramètres couramment utilisées pour l'alignement du texte sont gauche, droite, centre

Les attributs sont les suivants Caractéristiques :

1) Le centre de text-align est appliqué à un conteneur. Il cible uniquement le texte dans le conteneur et le conteneur dont l'affichage est en ligne ou en ligne-bloc si l'affichage du conteneur à l'intérieur l'est. inline ou inline-block, block, le contenu du conteneur à l'intérieur ne sera pas centré.

2), text-align est transitif vers le bas et continuera à être transmis aux éléments enfants. Si vous définissez un div, le contenu de ses divs enfants sera également centré.

Exemple :

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

</html>

Copier après la connexion

Rendu :

Comment centrer le texte en CSS

(Partage de vidéos d'apprentissage : css tutoriel vidéo)

css définit le texte pour qu'il soit centré verticalement

1. 🎜>

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

Rendu :

Comment centrer le texte en CSS

2. vertical-align:middle +display:table-cell rend le texte centré verticalement.

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

	</head>

	<body>

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

	</body>

</html>

Copier après la connexion

Rendu :

Comment centrer le texte en CSS

Description : vertical-align:middle +display:table-cell peut créer du texte sur une seule ligne, plusieurs lignes Les lignes de texte sont toutes centrées. Cependant, comme table-cell est un type en ligne, les éléments d'origine au niveau du bloc seront déplacés vers la même ligne par div. Si vous devez diviser les lignes en deux lignes, vous devez ajouter un conteneur supplémentaire à l'extérieur pour contrôler la position.

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!