Comment centrer le tout en CSS

Généralement, la mise en page du contenu principal des pages Web est centrée dans le navigateur. Par exemple, la page principale du site Web PHP chinois a une mise en page centrée.

Comment utiliser CSS pour centrer toute la mise en page d'une page Web ? Quelles sont les conditions de centrage de la mise en page ?

Nous devons d'abord définir le style de centrage du contenu CSS (css text-align:center) pour le corps, puis utiliser margin:0 auto lors de la disposition du DIV le plus à l'extérieur. zone. La disposition de l'objet est centrée.

Bien sûr, nous utilisons margin:0 auto pour l'objet box. Certains navigateurs n'ajoutent pas le style text-align:center à l'objet body, et la mise en page est toujours centrée. les différents navigateurs sont différents. Si vous ne définissez pas text-align:center sur le corps, certaines mises en page du navigateur seront centrées et d'autres à gauche. Cela entraînera une compatibilité de mise en page.

Explication : margin : 0 auto, ce qui signifie que l'espacement supérieur et inférieur de l'objet est de 0, l'espacement gauche et droit est automatique, et l'espacement gauche et droit est automatique en fonction de la largeur de l'objet .

Condition de centrage de la mise en page Web

1 Définissez le style de centrage du contenu CSS text-align:center sur le corps, code : body{text-align:center. >

2. Définissez le style margin:0 auto sur l'objet le plus à l'extérieur, Code : .php{margin:0 auto}

Case :

Afin d'observer l'effet de centrage de la mise en page, notre objet nommé CSS est ".php" et définit la bordure CSS en noir, la largeur CSS est de 400px, la hauteur CSS est de 100px.

1. Le code CSS est le suivant :

2. Extrait de code HTML :

La disposition de l'objet php est centrée

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!