À quoi devez-vous faire attention lorsque vous centrez un div en HTML ?

Beaucoup de gens ont de tels doutes. Lorsque nous créons une page Web, le cadre principal de la page Web est généralement centré dans le navigateur. Donc, si vous souhaitez obtenir un centrage horizontal du DIV le plus à l'extérieur, vous devez absolument le définir séparément. À quoi devez-vous faire attention lorsque vous définissez un div pour qu'il soit centré ? Permettez-moi de vous le présenter aujourd'hui.

Si le CSS de la boîte DIV la plus à l'extérieur s'appelle "#divcss5", cette fois la boîte la plus à l'extérieur sera centrée afin d'être compatible avec les principaux navigateurs.

Première condition :

À ce stade, définissez le style de centrage du contenu CSS (text-align:center) pour "body"

C'est-à-dire le code CSS :

body{text-align:center}

Premier paramètre :

À ce stade, définissez la marge CSS du style de centrage nécessaire pour "#divcss5"

C'est-à-dire le code CSS :

#divcss5{margin:0 auto}

Exemple d'utilisation du centre DIV

Afin d'observer facilement l'effet de centrage de la mise en page, nous ajoutons une bordure CSS à "#divcss5" avec une bordure noire, une largeur CSS de 300px et une hauteur de 100px.

1. Obtenez enfin le code CSS pour le centrage DIV :

body{ text-align:center} 
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

2. Extrait de code HTML correspondant :

<div id="divcss5">DIV水平居中案例</div>

Il y a tellement de choses à surveiller. à lors du centrage d'un div Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Recommandations associées :

Comment utiliser la balise 1aa9e5d373740b65a0cc8f0a02150c53 du html

Comment rédiger la déclaration de type de document html

Comment afficher des images circulaires en CSS3

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!