Médiaforma

Centrer horizontalement un élément en CSS

Print Friendly

Cette rubrique va vous montrer comment centrer horizontalement une balise <div> en utilisant quelques lignes de CSS. Dans cet exemple, la balise <div> contient quelques lignes de texte, mais vous auriez tout aussi bien pu y placer d’autres éléments, comme des images et/ou des vidéos par exemple.

La balise <div> est de style aucentre. Le centrage de la balise se fera donc dans la classe aucentre. Pour bien discerner les limites de la balise <div>, un arrière-plan de couleur jaune et une bordure groove continue de couleur rouge sont définis. La largeur de la balise est fixée à 300 pixels. L’astuce réside dans l’utilisation de la propriété margin, qui fixe les marges de la balise. Dans cet exemple, les marges supérieure et inférieure sont nulles et les marges gauche et droite s’adaptent automatiquement aux autres caractéristiques de la balise. Etant donné que la largeur de la balise a été fixée à 300 pixels, les marges gauche et droite se répartissent également la place restante.

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply