Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir l'alignement horizontal en CSS

青灯夜游
Libérer: 2023-01-03 09:24:49
original
10114 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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal