Le Tutoriel de CSS Align

CSS Align
CSS margin:auto
CSS text-align
CSS float

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.

Le Tutoriel de HTML Block/Inline Elements

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.

Le Tutoriel de CSS text-align

4. CSS float

Le Tutoriel de CSS Float et Clear