2.3 KiB
2.3 KiB
Alignements
Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
- les textes et contenus "inline" sont gérés via les classes
.txtleft
,.txtright
et.txtcenter
qui agiront sur la propriété CSStext-align
- les blocs sont alignés avec les classes
.left
,.right
et.center
qui affectent la valeurauto
à la propriétémargin
- les flottements sont gérés via les classes
.fl
(pourfloat: left
) et.fr
(pourfloat: right
)
Cas des flottants et les .mod
Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
- le super élément
.mod
. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un contexte "BFC" .clearfix
. Les éléments disposant de cette classe contiennent les flottants, tel les.mod
- les éléments
.clear
,.line
et.row
bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
Concrètement : je veux faire quoi ?
Centrer horizontalement
Du texte ou une image
HTML :
<div class="txtcenter">
<img src="licorne.png" alt="aïe ça pique">
</div>
Un bloc
HTML :
<section>
<div class="center w50">centré horizontalement</div>
</section>
Centrer verticalement
Version table-cell (HTML) :
<section class="col">
<div class="w50 center">centré horizontalement et verticalement</div>
</section>
Version table-cell (CSS) :
section {
vertical-align: middle;
}
Version flexbox (HTML):
<section class="flexbox-v">
<div class="center w50">centré horizontalement et verticalement</div>
</section>