Maison > Article > interface Web > Comment centrer un div en HTML
Comment centrer un div en HTML
- 清浅original
- 2019-04-10 16:27:1623259parcourir
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
[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>Rendu :
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>Rendu :
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!