[CSS/DIV] Ça résout parfaitement le centrage horizontal des pages CSS

Une méthode CSS courante pour centrer les éléments horizontalement

Centrer les éléments avec le CSS n’est pas une affaire anodine – les mêmes réglages légitimes de centrage CSS se comportent différemment selon les navigateurs. Commençons par examiner quelques méthodes courantes pour centrer les éléments horizontalement dans CSS.

1. Centrage avec marges automatiques

La façon préférée de centrer les éléments horizontalement dans CSS est d’utiliser la propriété de marge — il suffit de définir les propriétés marge-gauche et marge-droite sur auto. En usage pratique, on peut créer une div conteneur pour ces éléments qui doivent être centrés. Une chose à noter est que la largeur du conteneur doit être spécifiée :

div#container{ margin-left :auto ; marge-droite :auto ; largeur : 168px ; }

Cette approche fonctionne très bien dans la plupart des grands navigateurs, même IE6 sous Windows peut s’afficher correctement dans son mode conformité standard. Malheureusement, dans les versions inférieures de l’IE, ce réglage n’atteint pas d’effet de centrage. Donc, si vous souhaitez utiliser cette méthode dans un projet réel, assurez-vous que la version du navigateur IE de l’utilisateur ne soit pas inférieure à 6.0.

Malgré le manque de soutien, la plupart des concepteurs recommandent d’utiliser cette approche autant que possible. Cette méthode est également considérée comme la plus correcte et raisonnable de toutes les méthodes pour implémenter le centrage au niveau des éléments avec CSS.

2. Utiliser l’alignement de texte pour obtenir le centrage

Une autre façon d’obtenir le centrage des éléments est d’utiliser la propriété text-align, de fixer la valeur de la propriété au centre et de l’appliquer à l’élément du corps. C’est un hack complet, mais compatible avec la plupart des navigateurs, donc c’est naturellement essentiel dans certains cas.

On l’appelle un hack car cette méthode n’applique pas les propriétés du texte au texte, mais à l’élément qui est le conteneur. Cela nous donne aussi du travail supplémentaire. Après avoir créé les divs nécessaires pour la mise en page, nous devons appliquer la propriété text-align au corps selon le code suivant :

corps{ text-align :center ; }

Y aura-t-il des problèmes après cela ? Tous les descendants du corps sont centrés.

Par conséquent, nous devons écrire une autre règle pour ramener le texte à l’alignement par défaut à gauche :

p{ text-align :left ; }

Il est concevable que cette règle supplémentaire cause des désagréments. De plus, un navigateur qui suit vraiment la norme ne change pas la position du conteneur, mais ne fait que centrer le texte à l’intérieur.

3. Utiliser une combinaison de marges automatiques et d’alignement de texte

Parce que la méthode de centrage d’alignement du texte est bien compatible avec les arrières, et que la méthode de bourrage automatique est également prise en charge par la plupart des navigateurs contemporains, de nombreux concepteurs utilisent une combinaison des deux pour maximiser le support multi-navigateurs de l’effet de centrage :

corps{ text-align :center ; } #container{ margin-left :auto ; marge-droite :auto ; bordure : 1pxsolide ; largeur : 168px ; text-align :left }

Mais c’est toujours un piratage, et ce n’est pas parfait en aucun cas. Nous devons encore écrire des règles supplémentaires pour le texte dans le conteneur centré, mais au moins il est bien rendu dans différents navigateurs.

4. Solution négative à marge extérieure

Les solutions à marges négatives sont loin d’être aussi simples que d’ajouter des marges négatives aux éléments. Cette méthode nécessite l’utilisation à la fois de techniques de positionnement absolu et de marge négative.

Voici la méthode d’implémentation spécifique de ce schéma. D’abord, créez un conteneur avec des éléments centrés et positionnez-le absolument à 50 % du bord gauche de la page. Ainsi, la marge gauche du conteneur commencera à 50 % de la largeur de la page.

Ensuite, réglez la valeur de la marge gauche du conteneur à la moitié de la largeur négative du conteneur. Cela fixera le conteneur au milieu de la direction horizontale de la page.

#container{ background :#ffcurl(mid.jpg)repeat-ycenter ; position : absolue ; gauche : 50 % ; largeur : 760px ; marge-gauche : 380 px ; }

Regardez, pas de piratage ! Même si ce n’est pas la solution préférée, c’est une bonne façon de le faire, et c’est très polyvalent – étonnamment, cela ne fonctionne même pas dans NetscapeNavigator 4.x sans problème, n’est-ce pas ? Donc, si vous souhaitez la plus large gamme possible de prise en charge des navigateurs, cette méthode sera le meilleur choix.