Sommaire

Centrer les blocs

Dans une ligne, vous pouvez centrer les blocs avec l’utilisation de la classe .[size]-centered, où le préfixe [size] indique la taille de l’écran cible. Par exemple .small-centered indique que le bloc affecté doit être centré dans la ligne pour les petits écrans.

Voici le code HTML utilisé dans cet exemple :

<div class="row"> 
  <div class="small-4 columns small-centered bleu"> 
     <p>Cras justo odio...</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="small-3 columns rose"> 
     <p>Vivamus sagittis...</p> 
  </div> 
  <div class="small-6 columns or"> 
     <p>Donec sed odio dui...</p> 
  </div> 
  <div class="small-3 columns vert"> 
     <p>Etiam porta sem malesuada...</p> 
  </div> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 03 / 03-grille-l.html.

Voici le rendu obtenu :

images/C03-019.png

Le centrage est simplement obtenu en spécifiant aucun flottement du bloc et des marges gauche et droite en auto :

.column.small-centered, 
.small-centered.columns { 
  float: none; 
  margin-left: auto; 
  margin-right: auto; 
}