Centrer horizontalement en mode tabulaire en CSS

Pour centrer un élément horizontalement vous avez plusieurs possibilités.

Vous utilisez peut-être le fameux “margin:auto”, le problème c’est que le CSS doit connaitre à l’avance combien de pixels il doit espacer ses marges sur chacun des côtés de votre élément. Et par conséquent, vous avez besoin de renseigner la taille de l’élément pour le center.  Ça marche bien.

Mettons maintenant que vous voulez centrer une liste. La petite subtilité que vous pourriez avoir avec une liste : elle peut changer dans le temps, l’ajout d’un “li” par exemple. Donc, le fait de renseigner une taille fixe ne sera pas une bonne idée, car en faisant ça vous figez votre liste dans le marbre pour ainsi dire.

Le rendu tabulaire

C’est là que le display:table entre en jeu. Cette propriété va transformer le rendu de type block en un rendu de type table. Au final, ça marche comme dans un tableau que vous auriez créé dans votre HTML avec les tr, td classique etc.

Pour plus d’informations je vous renvoie sur l’article d’open du web sur le modèle tabulaire en CSS

Attention, n’est compatible qu’à partir de IE 8

Donc, si on reprend notre liste, ça nous donnerait ça :

Sur le ul :

display: table
margin: auto;
width: 70%

Et les li :

display: table-cell
width: 25%;
text-align:center: //alignement horizontal
vertical-align:middle //alignement vertical dans les cellules