La mise en page dans les normes Web est implémentée à l'aide de Div et CSS. Le plus couramment utilisé est l’effet de centrer horizontalement la page entière. Il s’agit des connaissances de base en matière de mise en page et des connaissances qui doivent être maîtrisées en premier. Cependant, les gens posent encore souvent cette question. Ici, je vais résumer brièvement la méthode d'utilisation de Div et CSS pour obtenir un centrage horizontal de la page :
1. margin:auto 0 et text-aligh:center
sont utilisés dans les navigateurs modernes (comme Internet). Explorer 7, Firefox, Opera, etc.) La méthode pour réaliser un centrage horizontal dans les navigateurs modernes est très simple, il suffit de définir les marges gauche et droite sur automatique. Signification:
#wrap { marge:0 auto;}
Le code ci-dessus signifie que la distance entre le wrap div et les côtés gauche et droit est automatiquement définie, les valeurs supérieure et inférieure étant 0 (peut être n'importe laquelle). Veuillez exécuter le code actuel dans un navigateur moderne (tel qu'Internet Explorer 7, Firefox, Opera, etc.) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<titre>52CSS.com</titre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#envelopper {
largeur : 760 px ;
marge : 0 automatique ;
bordure : 1px solide #333 ;
couleur d'arrière-plan : #ccc ;
}
</style>
</tête>
<corps>
<div id="wrap">
Pour définir le centrage horizontal des éléments de page dans les navigateurs modernes tels que Firefox, spécifiez simplement margin:0 auto;
<pré>
div#envelopper {
largeur : 760 px ;
margin:0 auto; /*0 ici peut être n'importe quelle valeur*/
bordure : 1px solide #ccc ;
couleur d'arrière-plan : #999 ;
}
</pre>
</div>
</corps>
</html>
Ce qui précède fonctionne très bien. Mais cela ne fonctionne pas dans Internet Explorer 6 et versions ultérieures, mais heureusement, il existe sa propre solution de contournement. Dans Internet Explorer, l'attribut text-align est héritable, c'est-à-dire qu'une fois défini dans l'élément parent, cet attribut sera présent par défaut dans l'élément enfant. Par conséquent, nous pouvons définir la valeur de l'attribut text-align dans la balise body sur center, de sorte que tous les éléments de la page soient automatiquement centrés. En même temps, nous devons également ajouter un crochet pour modifier le texte de la page. la façon dont nous avons l'habitude de lire - aligné à gauche. Il faut donc écrire le code comme ceci :
corps {text-align:center;}
#wrap {text-align:gauche;}
De cette façon, nous pouvons facilement réaliser l’alignement central de Div dans Internet Explorer. Par conséquent, pour afficher l’effet de centrage dans tous les navigateurs, nous pouvons écrire notre code comme ceci :
corps { texte-align: centre }
#wrap { text-align:gauche;
marge : 0 automatique ;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<titre>52CSS.com</titre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
corps { texte-align: centre }
div#envelopper {
texte-align:gauche;
largeur : 760 px ;
marge : 0 automatique ;
bordure : 1px solide #333 ;
couleur d'arrière-plan : #ccc ;
}
</style>
</tête>
<corps>
<div id="wrap">
Pour définir le centrage horizontal des éléments de page dans les navigateurs modernes tels que Firefox, spécifiez simplement margin:0 auto;
<pré>
div#envelopper {
largeur : 760 px ;
margin:0 auto; /*0 ici peut être n'importe quelle valeur*/
bordure : 1px solide #ccc ;
couleur d'arrière-plan : #999 ;
}
Dans Internet Explorer 6 et versions antérieures, nous devons également définir les paramètres suivants :
corps { texte-align: centre }
div#envelopper {
texte-align:gauche;
}
</pre>
</div>
</corps>
</html>
Mais il y a un principe ici, c'est-à-dire que l'élément centré doit avoir une largeur fixe. Par exemple, nous le définissons ici sur 760 pixels.
2. Positionnement relatif et marges négatives
Effectuez un positionnement relatif pour le retour à la ligne, puis utilisez des marges négatives pour compenser le décalage. Cette méthode est relativement simple et facile à mettre en œuvre :
#wrap {
position : relative ;
largeur : 760 px ;
gauche : 50 % ;
marge gauche : -380px
}
La signification de ce code est de définir le positionnement de wrap par rapport à la balise body de son élément parent, puis de déplacer sa bordure gauche au milieu de la page (c'est-à-dire la signification de left:50% enfin, nous) ; Déplacez-vous de la position médiane vers la gauche. Décalez-le de moitié en arrière pour qu'il soit centré horizontalement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<titre>52CSS.com</titre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#envelopper {
position : relative ;
largeur : 760 px ;
gauche : 50 % ;
marge gauche : -380px ;
bordure : 1px solide #333 ;
couleur d'arrière-plan : #ccc ;
}
</style>
</tête>
<corps>
<div id="wrap">
Méthode qui fonctionne dans tous les navigateurs :
<pré>
div#envelopper {
position : relative ;
largeur : 760 px ;
gauche : 50 % ;
marge gauche : -380px ;
bordure : 1px solide #333 ;
couleur d'arrière-plan : #ccc ;
}
</pre>
</div>
</corps>
</html>
De même, vous devez définir une largeur fixe avant de définir un centrage horizontal.
Quelle méthode choisir ?
Laquelle des deux méthodes ci-dessus est la meilleure ? La première méthode semble utiliser la technologie Hack, mais en fait ce n'est pas le cas. Il s'agit d'une méthode d'écriture standard du Web tout à fait satisfaisante et entièrement conforme aux spécifications. Vous pouvez donc choisir l'une des deux méthodes à utiliser. est un problème de piratage CSS.
3. Autres méthodes de centrage Les méthodes
mentionnées ci-dessus sont toutes des implémentations de centrage horizontal lorsqu'une largeur spécifique est définie. Parfois, nous souhaitons créer une disposition flexible, ou lorsqu'un élément se trouve dans un conteneur, nous voulons simplement qu'il soit centré et ne voulons pas définir de largeur spécifique. En fait, il ne s’agit pas d’une véritable mise en page centrée. Pour un élément d’une longueur de 100 %, diriez-vous qu’il est centré ou aligné à gauche ? Ainsi, tout centrage sans hauteur ni largeur n'est pas un vrai centrage. Nous définissons cette conception en utilisant le remplissage de l'élément. En fait, nous modifions la taille du conteneur de l'élément parent :
Si nous voulons que la longueur de l'élément wrap change avec la fenêtre tout en conservant le centre, nous pouvons écrire comme ceci :
corps {
remplissage : 10 px 150 px ;
}
Ici, il suffit de garder le remplissage égal sur les côtés gauche et droit de l’élément parent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<titre>52CSS.com</titre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
corps {
remplissage : 10 px 150 px ;
}
div#envelopper {
bordure : 1px solide #333 ;
couleur d'arrière-plan : #ccc ;
}
</style>
</tête>
<corps>
<div id="wrap">
Une mise en page flexible et centrée qui change en fonction de la taille de la fenêtre du navigateur :
<pré>
corps {
remplissage : 10 px 150 px ;
}
Ici, il suffit de garder le remplissage égal sur les côtés gauche et droit de l’élément parent.
</pre>
</div>
</corps>
</html>
Bien sûr, cela ne fait que "sembler centré", mais c'est souvent très utile.