Comment centrer un div en HTML-tutoriel HTML-php.cn

Comment centrer un div en HTML

清浅

Libérer： 2019-04-10 16:27:16

original

23323 Les gens l'ont consulté

Les méthodes pour centrer un div en HTML incluent : la méthode margin définit la marge gauche et la marge supérieure de la marge à la valeur de l'élément parent moins l'élément enfant, puis la divise par 2 pour centrer le div en plus ; , la méthode de position peut également centrer le div Centrage

Lors de la mise en page, la partie principale de la page Web est souvent centrée sur la page. Cela nous oblige à réaliser un centrage horizontal du div. présentera en détail comment centrer le div sur la page dans l'article. Il a une certaine valeur de référence et j'espère que cela sera utile à tout le monde

Comment centrer un div en HTML

[Recommandé cours : Tutoriel HTML]

Méthode de marge

Vous pouvez utiliser la marge pour centrer le div. margin-left est la largeur de l'élément parent moins la largeur de l'élément enfant puis divisée par 2 (Dans cet exemple : (400-100)/2=150px), la valeur de margin-top est la hauteur du parent élément moins la hauteur de l'élément enfant divisé par 2 (dans cet exemple : (300-100)/2= 100px)

Exemple :

<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

Copier après la connexion

Rendu :

Comment centrer un div en HTML

méthode de positionnement

Vous pouvez utiliser le positionnement pour centrer le div verticalement. Nous pouvons définir le positionnement absolu du sous-élément, et définissez les valeurs supérieure et gauche à 50%. Cependant, il convient de noter que lors de l'utilisation du positionnement, vous devez également définir la valeur de la marge, où margin- Les valeurs de gauche et de marge droite sont toutes deux négatives, et la taille de la valeur est la moitié de la largeur et de la hauteur de l'élément enfant

Exemple :

<style>
	.box{
	     width:400px;
	     height: 300px;
	     border: 1px solid #ccc;
	     position: relative;
	}
	.box1{
		width:100px;
		height: 100px;
		background-color: pink;
		position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px 		
		}
	</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

Copier après la connexion

Rendu :

Comment centrer un div en HTML

Référence pour cet article : https://www.html.cn/doc/html/layout/

Index des balises HTML : https://www.html.cn/sitemap.html

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère réussir cet article Peut vous aider à apprendre comment pour centrer un div sur la page

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!