Comment définir l'alignement horizontal en CSS-tutoriel CSS-php.cn

Comment définir l'alignement horizontal en CSS

青灯夜游

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

original

10125 Les gens l'ont consulté

Comment définir l'alignement horizontal en CSS : 1. Utilisez le style "text-align: center;" pour définir l'alignement central horizontal des éléments de texte ; l'alignement central horizontal des éléments de bloc.

Comment définir l'alignement horizontal en CSS

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

1. Utilisez l'attribut text-align: center;

text-align pour spécifier l'alignement horizontal du texte de l'élément.

Valeur de l'attribut :

left Disposez le texte vers la gauche. Par défaut : déterminé par le navigateur.
droite Dispose le texte vers la droite.
centre Disposez le texte au centre.
justify obtient l'effet d'aligner le texte aux deux extrémités.

Exemple :

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

Copier après la connexion

Rendu :

Comment définir lalignement horizontal en CSS

[Tutoriel recommandé :Tutoriel vidéo CSS ]

2. Utilisez l'attribut raccourci margin: auto;

margin pour définir tous les attributs de marge dans une seule instruction.

Valeur de l'attribut :

auto Le navigateur calcule les marges.
length spécifie la valeur de la marge dans des unités spécifiques, telles que les pixels, les centimètres, etc. La valeur par défaut est 0px.
% spécifie les marges en pourcentage de la largeur de l'élément parent.

Pour centrer horizontalement un élément (tel que

), vous pouvez utiliser margin: auto;.

Régler sur la largeur de l'élément l'empêchera de déborder jusqu'au bord du conteneur. L'élément

précise la largeur et répartit uniformément les marges vides des deux côtés

Exemple :

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

Copier après la connexion

Rendu :

Comment définir lalignement horizontal en CSS