Comment définir le centrage horizontal en CSS-tutoriel CSS-php.cn

Comment définir le centrage horizontal en CSS

青灯夜游

Libérer： 2023-01-04 09:34:22

original

5829 Les gens l'ont consulté

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).

Comment définir le centrage horizontal en CSS

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>

Copier après la connexion

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>

Copier après la connexion

Rendu :

Comment définir le centrage horizontal en CSS