Utiliser CSS pour réaliser le centrage horizontal de DIV-tutoriel CSS-php.cn

Utiliser CSS pour réaliser le centrage horizontal de DIV

php中世界最好的语言

Libérer： 2020-09-05 11:36:05

original

24274 Les gens l'ont consulté

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.

Utiliser CSS pour réaliser le centrage horizontal de DIV

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>

Copier après la connexion

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

Utiliser CSS pour réaliser le centrage horizontal de DIV

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 :

Comment convertir du HTML en fichier txt

Comment convertir un tableau et td Définir l'arrière-plan pour réaliser la bordure du tableau

Comment définir habilement la bordure du tableau pour le tableau et td

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!