Centrer un élément avec CSS n'est pas une tâche simple : le même paramètre de centrage CSS valide se comporte différemment selon les navigateurs. Jetons d'abord un coup d'œil à plusieurs méthodes courantes en CSS pour centrer les éléments horizontalement.
1. Utilisez des marges automatiques pour réaliser le centrage. La meilleure façon de centrer un élément horizontalement en CSS est d'utiliser l'attribut margin : définissez simplement les attributs margin-left et margin-right de l'élément sur auto. En utilisation réelle, nous pouvons créer un div qui agit comme un conteneur pour ces éléments qui doivent être centrés. Une chose à noter en particulier est que la largeur doit être spécifiée pour le conteneur :
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
Cette méthode fonctionne très bien dans la plupart des principaux navigateurs, même IE6 sur la plateforme Windows, dans son mode de compatibilité avec les standards (mode Conformité) affiché normalement. Mais malheureusement, dans les versions inférieures d'IE, ce paramètre n'obtient pas l'effet de centrage. Par conséquent, si vous souhaitez utiliser cette méthode dans des projets réels, vous devez vous assurer que la version du navigateur IE de l'utilisateur n'est pas inférieure à 6.0.
Bien que le support soit loin d’être idéal, 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 la plus raisonnable parmi les différentes méthodes permettant d'obtenir un centrage horizontal des éléments à l'aide de CSS.
2. Utilisez text-align pour réaliser le centrage. Une autre façon de centrer les éléments consiste à utiliser l'attribut text-align pour définir la valeur de l'attribut sur center et l'appliquer à l'élément body. Cette approche est un hack complet, mais elle est compatible avec la plupart des navigateurs, elle est donc naturellement nécessaire dans certains cas.
La raison pour laquelle on l'appelle hack est que cette méthode n'applique pas l'attribut text au texte, mais à l'élément qu'est le conteneur. Cela nous crée également du travail supplémentaire. Après avoir créé les div nécessaires pour la mise en page, nous devons appliquer l'attribut text-align au corps selon le code suivant :
body{
text-align:center
}
Y aura-t-il des problèmes après cela ? Tous les éléments descendants du corps seront affichés centrés.
Par conséquent, nous devons écrire une autre règle pour ramener le texte à l’alignement gauche par défaut :
p {
texte-align:gauche;
}
Vous imaginez bien que cette règle supplémentaire occasionnera quelques désagréments. De plus, les navigateurs qui respectent pleinement les normes ne modifieront pas la position du conteneur, mais centreront uniquement le texte à l'intérieur de celui-ci.
3. Utilisez les marges automatiques et l'alignement du texte en combinaison. Étant donné que la méthode d'alignement et de centrage du texte a une bonne compatibilité ascendante et que la méthode de marge automatique est également prise en charge par la plupart des navigateurs contemporains, de nombreux concepteurs utilisent une combinaison des deux afin de créer des effets de centrage. obtenez une prise en charge maximale entre navigateurs :
body {
alignement du texte : centre ;
}
#conteneur {
marge gauche : auto ;
marge droite : auto ;
bordure : 1px rouge uni ;
largeur : 168 px ;
alignement du texte : gauche
}
Mais cela reste un hack, et ce n’est en aucun cas parfait. Nous devons encore écrire des règles supplémentaires pour centrer le texte dans le conteneur, mais au moins cela semble bon dans les navigateurs.
4. Solution de marge négative La solution de marge négative est bien plus que simplement ajouter des marges négatives aux éléments. Cette méthode nécessite d'utiliser à la fois un positionnement absolu et des marges négatives.
Voici la méthode de mise en œuvre spécifique de cette solution. Créez d’abord un conteneur contenant l’élément centré, puis positionnez-le absolument à 50 % du bord gauche de la page. De cette façon, la marge gauche du conteneur commencera à 50 % de la largeur de la page.
Ensuite, définissez la valeur de la marge gauche du conteneur sur une moitié négative de la largeur du conteneur. Cela ancrera le conteneur au milieu horizontal de la page.
#conteneur {
arrière-plan : #ffc url(mid.jpg) centre de répétition ;
position : absolue ;
gauche : 50 % ;
largeur : 760 px ;
marge gauche : -380px ;
}
Vous voyez, il n'y a pas de hack ! Bien que ce ne soit pas la solution préférée, c'est une bonne approche et fonctionne extrêmement bien - elle fonctionne même dans Netscape Navigator 4.x sans aucun problème, ce qui est surprenant, n'est-ce pas ? Donc, si vous souhaitez bénéficier de la prise en charge la plus large du navigateur, cette méthode sera le meilleur choix.