Alignement
Alignement horizontal
Aligné à gauche (text-left
)
Texte aligné à gauche.
Texte aligné à droite
Code
<p class="text-left">Texte aligné à gauche.</p>
Aligné à droite (text-right
)
Texte aligné à droite.
Code
<p class="text-right">Texte aligné à droite.</p>
Centré (text-center
)
Texte aligné au centre.
Code
<p class="text-center">Texte aligné au centre.</p>
Centrer des blocs de contenu (center-block
)
Code
<img class="center-block" alt="..." src="x.jpg" />
Aligné à gauche à partir de la petite vuetext-sm-left
Aligné vers la gauche dans la petite vue et plus
Code
<p class="text-right text-sm-left">Aligné vers la gauche dans la petite vue et plus</p>
Aligné à droite à partir de la petite vuetext-sm-right
Aligné vers la droite dans la petite vue et plus
Code
<p class="text-sm-right">Aligné vers la droite dans la petite vue et plus</p>
Alignement vertical
Classe CSS | Exemple |
---|---|
Haut (align-top )
|
Texte aligné en haut |
Milieu (align-middle )
|
Texte aligné au milieu |
Bas (align-bottom )
|
Texte aligné en bas |
Code
<table>
<tr>
<td> ... </td>
<td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
</tr>
<tr>
<td> ... </td>
<td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
</tr>
<tr>
<td> ... </td>
<td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
</tr>
</table>
Alignement des items (Grille)
Les classes CSS suivantes sont utilisé conjointement avec les grilles flex. Les examples de ces derniers sont avec l'exemple de la grille flex. (lien à venir)
align-self-center
align-self-end
align-items-center
align-items-sm-center
Détails de la page
- Date de modification :