Centrage d'éléments positionnés.

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (12309 lectures)

Le centrage d'éléments, voire de sites web entiers, n'est pas toujours chose aisée en CSS. En général, deux techniques d'approche ont donné lieu à deux écoles assez différentes.

Pourtant, rien n'empêche de cumuler les avantages des deux méthodes...

Nous n'allons pas ici débattre ni expliquer comment fonctionnent ces deux techniques, elles sont expliquées sur de nombreux sites CSS, et notamment ici-même sur Alsa. Par contre, nous allons les rappeler rapidement...

Technique des marges automatiques

Cette technique positionne les éléments dimensionnés grâce à la valeur "auto" sur les marges latérales. L'élément reste dans le flux HTML.

Si cet élément contient d'autres éléments, il faut que ce contenu reste lui aussi dans le flux, sinon il s'affichera hors de l'élément centré. En clair, cela empêche l'objet centré de contenir des éléments positionnés en absolu par exemple.

Technique des marges négatives

Cette autre méthode est basée sur une astuce qui permet de centrer des éléments positionnés en absolu.

L'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%, ce qui placera le coin supérieur gauche du bloc au milieu de page.

Ensuite, il faut lui donner des marges négatives dont la valeur est exactement la moitié de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.

Cette technique a l'avantage de centrer l'élément tout en permettant au contenu d'être positionné également. Cependant, elle est plus lourde, moins intuitive et nécessite de sortir la calculette !

Deux en un

Il existe pourtant une méthode alternative qui permet d'avoir les avantages des deux techniques.

Appliquons donc des marges latérales automatiques à notre élément conteneur (méthode 1). Effectivement, à ce stade là, l'élément ne peut pas contenir d'éléments positionnés.

La seule solution serait que le conteneur lui-même soit positionné. Or en lui donnant une position absolute, les marges automatiques n'ont plus aucun effet.

Heureusement, il existe d'autres moyens de positionner un élément, la position relative par exemple.

Donnez tout simplement une position relative à votre conteneur global et vous verrez qu'il restera centré avec ses marges automatique tout en acceptant un contenu positionné !

Vous retrouverez ces techniques sur le tutoriel de centrage CSS d'Alsa.

Commentaires

ElMoustiko a dit le

Oulaahh c'est un très bon récapitulatif de technique ça, je ne suis toujours pas convaincu par le positionnement absolu par contre :p Mais encore plus tenté de m'y atteler tout de même, ça n'est pas pour rien que nombre de webmestres l'utilisent ! En tout à défaut d'être super détaillé (ça n'est pas le but, j'ai bien compris), cet article récapitule parfaitement les techniques et met les choses au clair.

awam a dit le

et ca fonctionne quand sous mac?