Tristan Jahier

Grumpy dev' (╯°□°)╯彡┻━┻until shit.changes {visit same_page; expect {shit}.to change}
← Retour

Astuce CSS : classes d'alignement du texte et des blocs

Posted 24/08/2013  •  Written by Tristan Jahier  •  Category : Développement web
Il est fréquent de vouloir aligner des éléments comme des images et du texte quand on crée un design ou que l'on rédige un article. Mais ce n'est pas très pratique d'écrire du style en-ligne pour chaque élément. Une idée toute simple et très pratique : définir un ensemble de classes spécifiques à l'alignement.

Je me suis donc écrit une petite feuille de style qui contient des classes très pratiques pour l'alignement :

// Block alignment
.center
    display: block
    margin: 0 auto
table.center
    display: table
// Text alignement
.txt-center
    text-align: center
.txt-left
    text-align: left
.txt-right
    text-align: right
.txt-justify
    text-align: justify

Notez le petit fix nécessaire pour les tableaux. En effet, quand il est affiché comme un bloc, le tableau prend toute la largeur disponible, alors qu'affiché comme tableau, il base sa taille sur son contenu.

Effectivement, ce n'est pas grand chose, mais vos documents HTML gagneront quand même sensiblement en lisibilité et en sémantique.

<div class="pricing-plan center txt-center">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod,
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>

C'est quand même mieux qu'incorporer du style dans votre document HTML ou même de surcharger d'autres classes pour lesquelles « être centré » ne fait pas forcément sens.

<div class="pricing-plan" style="margin: 0 auto; text-align: center;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod,
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>

K0N4M1 C0D3