Maison > Article > interface Web > Méthodes courantes pour centrer horizontalement les pages Web dans l'échange CSS layout_Experience

Méthodes courantes pour centrer horizontalement les pages Web dans l'échange CSS layout_Experience

PHP中文网original: 2016-05-16 12:06:341492parcourir

Le centrage horizontal de la page est généralement un casse-tête, surtout pour les novices. L'incompatibilité entre les navigateurs peut également causer de gros problèmes. Parlons des méthodes courantes pour centrer la page horizontalement.
Voir « Maîtriser CSS » pour le contenu suivant.
Code HTML :

Le code est le suivant

<body>   
<div id="wrapper">   
</div>   
</body>   
IE居中办法：   
body {   
     text-align:center;   
     min-width:760px;   
}   
#wrapper {   
     width:720px;   
     text-align:left;   
}

IE confondra text-align:center pour centrer tout, pas seulement le texte. Réalignez ensuite le contenu du conteneur vers la gauche.

Non-IE :

Le code est le suivant :

#wrapper {   
     width:720px;   
     margin:0 auto;   
}

Comment le rendre compatible avec IE et non-IE Comme suit :

Le code est le suivant :

#wrapper {   
     width:720px;   
     position:relative;   
     left:50%;   
     margin-left:-360px;   
}

Positionnez d'abord le bord gauche du conteneur au milieu de la page, puis déplacez-le de la moitié de sa largeur vers la gauche .

Ce qui précède est la méthode courante de centrage horizontal des pages Web de mise en page CSS_le contenu de l'échange d'expériences. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La différence entre la classe et l'ID, la différence entre la marge et le remplissage Notes d'étude CSS_Échange d'expériencesArticle suivant：La différence entre la classe et l'ID, la différence entre la marge et le remplissage Notes d'étude CSS_Échange d'expériences

Articles Liés

Voir plus