Collection complète de solutions de centrage horizontal pour elements_CSS/HTML

Tout d’abord, jetons un coup d’œil à un simple code de fichier XHTML/HTML (partie). Notre objectif est de centrer le #conteneur horizontalement.

content

Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.

Utiliser des bordures adaptatives ( auto?margin)
La façon préférée de centrer n'importe quel élément horizontalement est d'utiliser la propriété margin et de définir les valeurs gauche et droite sur auto. Mais vous devez spécifier une largeur pour #container.

div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
Ce schéma fonctionne dans n'importe quel navigateur moderne Tous sont valides, même IE6, à condition qu'il soit en mode de compatibilité des standards du web (compliance?mode). Malheureusement, cela ne fonctionnera pas dans les versions précédentes d'IE/Win. On fait un tableau pour ça :

Liste de prise en charge des limites adaptatives de navigation ?Navigateur ?Version ?Support ?
Internet Explorer 6.0, conformité ?mode ?Oui ?
Internet Explorer 6.0, bizarreries ?mode ?Non ?
Internet Explorer 5.5 Windows?Non?
Internet Explorer 5.0 Windows?Non?
Internet Explorer 5.2 Macintosh?Oui?
Mozilla Toutes les versions actuelles?Oui?
Mozilla Firefox?Toutes les versions?Oui?
Netscape? 4.x?Non?
Netscape?6.x+?Oui?
Opera?6.0,?7.0?Macintosh?et?Windows?Oui?
Safari?1.2?Oui?

Malgré les limitations de la prise en charge des navigateurs, la plupart des concepteurs vous encouragent à le faire autant que possible. Mais nous pouvons toujours utiliser CSS pour toutes les situations.

Utiliser l'alignement du texte (text-align)
Cette solution nécessite l'utilisation de la propriété text-align, qui est appliquée à l'élément body et affectée à la valeur center.

body{
text-align:center;
}
Il traite tous les navigateurs de manière équitable, très approfondie et à portée de main. Cependant, il s'agit d'une propriété donnée au texte, qui entraîne également le centrage du texte dans le #container. Nous devons donc faire un travail supplémentaire sur la mise en page :

div#container{
text-align:?left;
}
De cette façon, l'alignement du texte peut être ramené à l'état par défaut.

Bordures et disposition du texte intégrées
La disposition du texte étant rétrocompatible, les navigateurs contemporains prennent également en charge les bordures adaptatives, et de nombreux concepteurs les combinent pour permettre une utilisation entre navigateurs.

corps{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
Hélas, ce n'est toujours pas parfait, car c'est encore un hack. Vous devez écrire des règles redondantes pour la disposition du texte. Mais maintenant, nous pouvons utiliser une solution multi-navigateurs plus parfaite.

Solution limite négative
Cette solution doit être combinée avec un positionnement absolu (absolu ?positionnement ?). Tout d'abord, positionnez le #container de manière absolue et décalez-le vers la gauche de 50 %, de sorte que le bord gauche du #container corresponde à la moitié de la résolution de la page. Ensuite, définissez la marge gauche du #container sur une valeur négative égale à la moitié de la largeur du #container.

#conteneur ?{
arrière-plan :?#ffc?url(mid.jpg)?repeat-y?center;
position :?absolue;
gauche :?50 %;
largeur :?760px;
margin-left:?-380px;
}
Ecoute, non ?hacks ! Même Netscape?4.x le prend en charge !