Maison > interface Web > tutoriel CSS > 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中文网
Libérer: 2016-05-16 12:06:34
original
1522 Les gens l'ont consulté

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;   
}
Copier après la connexion

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;   
}
Copier après la connexion


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;   
}
Copier après la connexion


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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal