Maison >interface Web >tutoriel CSS >Utiliser CSS pour réaliser le centrage horizontal de DIV
Utiliser CSS pour réaliser le centrage horizontal de DIV
- php中世界最好的语言original
- 2017-11-21 09:46:5424239parcourir
Comment définir le centrage d'un div avec CSS : définissez d'abord "text-align:center" sur le corps ; puis définissez le style CSS de la boîte div qui doit être centrée sur "margin:0 auto" pour centrer le div correspondant horizontalement.
Comment utiliser CSS pour centrer un DIV ? J'ai créé un code facile à comprendre pour tout le monde, en utilisant CSS pour réaliser l'affichage central horizontal de DIV. Les amis dans le besoin peuvent s'y référer.
nécessite deux codes CSS principaux, l'un est text-align:center (le contenu est centré), l'autre est margin:0 auto ; à utiliser ensemble pour obtenir une disposition d’affichage centrée de la boîte div.
Nous définissons d'abord text-align:center sur le corps, puis définissons le style CSS margin:0 auto sur la boîte div qui doit être centrée, afin que le div correspondant puisse être centré horizontalement.
Le code de centrage div est appliqué. Afin d'observer l'effet de centrage div, nous définissons un div nommé ".div" pour le div. Utilisez class="div" dans la balise div dans le html, et. définissez sa largeur sur 400 px ; sa hauteur sur 100 px avec une bordure rouge. Pour que nous puissions observer l’effet.
1. Code html+css complet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<div class="div">
DIVCSS5实例
</div>
</body>
</html>2. Capture d'écran de l'exemple de centrage div+css
Capture d'écran de l'implémentation div css de l'effet de centrage
Implémentation div Capture d'écran de l'effet de centrage
3. Fonctionnalités d'application du code de centrage div
Cette méthode de centrage rend l'effet de centrage div parfaitement compatible avec tous les principaux plates-formes et navigateurs. Il est compatible avec les versions supérieures et supérieures d’IE.
Voici comment utiliser CSS pour réaliser un centrage horizontal de DIV.
Lecture connexe :
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!