Centrer un élément horizontalement

Centrer avec le margin

Centrer un élément en CSS est généralement un peu difficile. Bien que cela semble simple, il y a plusieurs variables qui peuvent faire changer la méthode utilisé pour centrer un élément. Si vous voulez centrer un élément horizontalement, la technique du margin à auto peut vous être utile.

HTML

CSS

Attention:

La technique expliqué ci-dessus fonctionne uniquement si l'élément que le veut centrer et son parent sont affiché en bloc et que l'élément que l'on veut centrer possède une largeur fixe défini par la propriété width. Il est donc possible que vous ayez à changer le type de certains éléments avec la propriété display pour que le tout fonctionne.

Margin automatique

Lorsque nous utilisons la propriété margin en CSS, nous pouvons lui donner des valeurs particulière. L'une de ces valeurs est auto. Une valeur auto de margin veut dire que la marge prendra le restant de l'espace disponible de son conteneur. C'est donc grace à cette valeur que la technique pour centrer fonctionne. Si on mets la valeur du margin à gauche et à droite à auto, le margin se sépare l'espace restant, centrant l'élément au milieu. Pour que cette valeur fonctionne, il faut toutefois répondre à 2 critères:

L'élément sur lequel on met le margin et son parent doivent être affiché en block.
L'élément sur lequel on met le margin doit avoir une largeur fixe, donc un width défini dans le CSS.

Lorsqu'on veut centrer un élément avec la technique ci-dessus, il faut donc respecter ces 2 critères.

<< Page précédente Page suivante >>