Regardons d'abord mon simple code de fichier XHTML/HTML (partie). Notre objectif est de centrer #container horizontalement.
<corps>
<div id="conteneur">
<h1>contenu</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>Utiliser des marges adaptatives (marge automatique)
La méthode préférée pour centrer n'importe quel élément horizontalement consiste à utiliser la propriété margin et à définir les valeurs gauche et droite sur auto. Mais vous devez spécifier une largeur pour #container.
div#conteneur {
marge gauche : auto ;
marge droite : auto ;
largeur : 168 px ;
}
Cette solution fonctionne sur n'importe quel navigateur moderne, même IE6, à condition qu'il soit en mode conformité aux standards du web. Malheureusement, cela ne fonctionnera pas dans les versions précédentes d'IE/Win. Nous créons un tableau pour cela : Parcourir la liste de prise en charge des bordures adaptatives Prise en charge de la version du navigateur
Internet Explorer 6.0, mode de conformité Oui
Internet Explorer 6.0, mode bizarreries Non
Internet Explorer 5.5 Windows Non
Internet Explorer 5.0 Windows Non
Internet Explorer 5.2 Macintosh Oui
Toutes les versions actuelles de Mozilla sont
Toutes les versions de Mozilla Firefox sont
Netscape 4.x Non
Netscape 6.x+ Oui
Opera 6.0, 7.0 Macintosh et Windows Oui
Safari 1.2 Oui
Bien que limité par la prise en charge du navigateur, la plupart des concepteurs vous encouragent à le faire autant que possible. Mais nous pouvons toujours utiliser CSS pour toutes les situations. Utilisation de 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 de la valeur center.
corps{
texte-align:centre;
}
Il rend justice à tous les navigateurs, est complet et est à 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 effectuer quelques travaux supplémentaires sur la mise en page :
div#conteneur{
aligner le texte : gauche ;
}
De cette manière, l'alignement du texte peut être ramené à l'état par défaut. Bordures intégrées et alignement du texte Étant donné que l'alignement du texte est rétrocompatible et que les navigateurs contemporains prennent également en charge les bordures adaptatives, de nombreux concepteurs les combinent pour permettre une utilisation multi-navigateurs.
corps{
alignement du texte : centre ;
}
#conteneur {
marge gauche : auto ;
marge droite : auto ;
bordure : 1px rouge uni ;
largeur : 168 px ;
alignement du texte : gauche
}
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 de limite négative