Comment utiliser CSS pour centrer un DIV-tutoriel CSS-php.cn

Comment utiliser CSS pour centrer un DIV

php中世界最好的语言

Libérer： 2017-11-20 11:07:52

original

2988 Les gens l'ont consulté

Le code que je vous ai apporté aujourd'hui est ce que de nombreux amis doivent utiliser. CSS est utilisé pour réaliser le centrage DIV. Les amis dans le besoin peuvent sauvegarder cet article, il vous sera pratique de l'utiliser à l'avenir lorsque vous en aurez besoin. CSS pour réaliser le centrage DIV. Utilisation Il existe de nombreuses façons de centrer un DIV en CSS. Cette fois, je vais vous apprendre un code relativement simple et hautement compatible.

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.

Explication avec des exemplesL'application du code de centrage div Afin d'observer l'effet de centrage div, nous définissons un div nommé ".div" pour le div et utilisons class="div" dans la balise div dans le code HTML, définissez sa largeur sur 400 px ; sa hauteur sur 100 px et sa bordure sur rouge. Pour que nous puissions observer l’effet.

1. Code html+css complet

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div居中 在线演示 www.divcss5.com</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

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 tous les principaux navigateurs, quelle que soit la version haute d'IE ou la version haute d'IE, sont compatibles.

Ce qui précède explique comment utiliser CSS pour centrer un DIV. L'avez-vous appris ?

Recommandations associées :

Effet de bouton de vague d'eau CSS

Conseils CSS3 pour dessiner divers graphiques de base

Comment dessiner des triangles et des parallélogrammes avec CSS

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!