Centrer un élément à l'aide de CSS n'est pas une mince affaire. Le même paramètre de centrage CSS se comporte différemment selon les navigateurs. Cet article présente 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 :
Cette méthode fonctionne très bien dans la plupart des navigateurs grand public, et même IE6 sur la plate-forme Windows peut s'afficher normalement dans son mode de conformité standard. 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 divs nécessaires pour la mise en page, nous devons appliquer l'attribut text-align au corps selon le code suivant :
Y aura-t-il des problèmes plus tard ? 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 :
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. Bénéficiez d'une prise en charge maximale entre navigateurs :
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.
Bien que ce ne soit pas la solution privilégiée, il s’agit d’une bonne approche et présente un large éventail d’applicabilités.