Comment aligner horizontalement et verticalement avec CSS ?

Comment Aligner Horizontalement Et Verticalement Avec Css



Le ' Alignement horizontal ” aligne les éléments HTML sur l'axe X, c'est-à-dire à gauche, à droite ou au centre d'un élément parent. D'autre part, le « Alignement vertical ” aligne l'élément le long de l'axe Y, ce qui peut être extrêmement utile pour centrer le contenu dans une section ou aligner des éléments de différentes hauteurs. Ils aident à créer une mise en page personnalisée et uniforme et améliorent la lisibilité du contenu.

Ce guide illustre la procédure d'alignement horizontal et vertical à l'aide de CSS.

Comment aligner horizontalement et verticalement avec CSS ?

Les développeurs utilisent l'alignement « horizontal » et « vertical » pour organiser et positionner les éléments sur une page Web de manière plus organisée. Ils peuvent être utiles pour aligner des éléments et des contenus, positionner des boutons ou des icônes, etc. Suivez les exemples ci-dessous pour une meilleure compréhension :





Alignement horizontal

En CSS, la propriété text-align est utilisée pour aligner horizontalement le texte dans son élément parent. Visitez les extraits de code ci-dessous pour une meilleure compréhension :



< corps >
< div classe = 'compte' >
< div classe = 'aligner à gauche' > Linuxhint est aligné à gauche < / div >
< div classe = 'alignement au centre' > Linuxhint est Center Align < / div >
< div classe = 'aligner à droite' > Linuxhint est aligné à droite < / div >
< / div >
< / corps >

Dans l'extrait de code ci-dessus :



  • Tout d'abord, le parent ' div ” est utilisé avec un attribut de classe ayant une valeur de “ compte ”.
  • Ensuite, trois éléments enfants ont été créés et l'attribut class a été attribué à chaque div.
  • Au final, les valeurs de « leftAlign », « centerAlign » et « rightAlign » sont fournies aux classes.

Maintenant, insérez les propriétés CSS suivantes dans le '