Le Tutoriel de CSS Align

View more Tutorials:

1- CSS Align

Il n'y a pas de règle générale pour vous d'aligner (Align) un élément, vous devez donc donner une solution appropriée en fonction de la situation. Dans ce billet, je vais donner quelques scénarios et solutions pour aligner un élément.

Horizontal Align

L'alignement horizontal (Horizontal Align) signifie la façon dont vous affichez un élément à gauche (Left), au centre (Center) ou à droite (Right).

Vertical Align

L'agnement vertical (Vertical Align) signifie la façon dont vous faites afficher un élément en haut (Top), au milieu (Middle) ou en bas (Bottom).

2- CSS margin:auto

Si vous avez un élément Block (Block element), par exemple, <div>, et que vous l'alignez horizontalement au centre, CSS margin:auto est une bonne solution.
Vous devez définir la largeur d'un élément à un nombre spécifique, ou une valeur en pourcentage (%), mais elle doit être inférieure à 100%, ce qui garantit que l'élément n'occupe pas tout l'espace horizontal de l'élément le contenant.
Et appliquez- lui  CSS margin:auto 
margin-left: auto;
margin-right: auto;

/* OR:  */

margin: auto;
Remarque : CSS margin-top:auto et  CSS margin-bottom:auto n'agissent pas comme un alignement vertical.
h-align-block-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS Align</title>
    <meta charset="UTF-8"/>
    <style>
        .center {
           margin-left: auto;
           margin-right: auto;
           width: 180px;
           border: 3px solid green;
           padding: 10px;
        }
    </style>
</head>
<body>

    <h3>Horizontal Align - Center</h3>

    <hr/>

    <div class = "center">
         margin-left: auto; <br/>
         margin-right: auto; <br/>
         width: 180px; <br/>
         border: 3px solid green; <br/>
         padding: 10px;<br/>
    </div>

</body>
</html>

3- CSS text-align

La propriété (property) CSS text-align est utilisée pour un élément de bloc (block element) ou une cellule (cell) de table pour aligner horizontalement (Horizontal align) son contenu  inligne (inline content).
Lorsque  CSS text-align s'applique à un élément, il fonctionne avec tous les contenus  inligne (inline content) de cet élément, par exemple, le contenu texte, les éléments enfants tels que <span>,. Mais il ne fonctionne pas avec les éléments enfants de l'élément courant.

4- CSS float

View more Tutorials: