devstory

Le Tutoriel de CSS Align

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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: