Maison > Article > interface Web > Comment définir le centrage horizontal en CSS

Comment définir le centrage horizontal en CSS

青灯夜游original: 2021-04-02 16:25:115827parcourir

Comment définir le centrage horizontal en CSS : 1. Utilisez le style "text-align: center;" pour centrer horizontalement les éléments en ligne dans les éléments de niveau bloc (éléments parents) ; ;" style, qui peut centrer horizontalement les éléments de niveau bloc avec une largeur fixe dans les éléments de niveau bloc (éléments parents).

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

Méthode 1 : utilisez l'attribut text-align

pour définir directement le style text-align: center; sur l'élément parent. Vous pouvez aligner les éléments en ligne dans le bloc. élément de niveau (élément parent) Centré horizontalement

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background: palevioletred;
				text-align: center;
			}
		</style>

		<div id="father">
			我是测试文本！
		</div>

</html>

Image d'effet :

Comment définir le centrage horizontal en CSS

Instructions :

Cette méthode uniquement fonctionne pour le texte, les images, les éléments en ligne tels que les boutons sont valides (l'attribut display est défini sur inline ou inline-block) et centrés horizontalement

(Partage vidéo d'apprentissage : tutoriel vidéo CSS )

Méthode 2 : utilisez l'attribut margin

pour définir le style margin: 0 auto; pour les éléments enfants qui doivent être centrés. Vous pouvez niveler horizontalement. Éléments de niveau bloc avec une largeur fixe en éléments de niveau bloc (éléments parents Centrés).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: palevioletred;
			}
			
			#son {
				width: 100px;
				height: 50px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>

		<div id="father">
			<div id="son">我是块级元素</div>
		</div>

</html>

Rendu :

Comment définir le centrage horizontal en CSS

Description :

Cette méthode ne peut se centrer qu'horizontalement, et pour les éléments flottants Invalide ciblage.

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!

html5 css css3 auto display margin

Déclaration：

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

Article précédent：Comment changer le style de la souris avec CSSArticle suivant：Comment changer le style de la souris avec CSS

Articles Liés

Voir plus