Sommaire

L’alignement vertical

1. L’alignement centré

Nous allons maintenant pouvoir gérer l’alignement vertical des blocs dans les lignes. Nous allons appliquer différentes classes au niveau des lignes <div class="row">.

La classe align-middle permet d’avoir un alignement centré verticalement de tous les blocs dans les lignes.

Voici le code HTML utilisé dans cet exemple :

<div class="row align-middle gris-clair"> 
  <div class="columns small-6 gris-fonce"> 
     <p>Donec id elit non mi porta gravida at eget metus.</p> 
  </div> 
  <div class="columns small-6 gris-fonce"> 
     <p>Nullam id dolor...</p> 
  </div> 
</div>

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

Voici le rendu obtenu :

images/C04-017.png

Voici la règle CSS utilisée :

.row.align-middle { 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center 
}

La propriété align-items: center permet de centrer verticalement les blocs.

2. Des blocs de hauteur égale

La classe align-stretch permet d’avoir des hauteurs de bloc identiques dans les lignes.

Voici le code HTML utilisé dans cet exemple :

<div class="row align-stretch gris-clair"> 
  <div class="columns gris-fonce"> 
     <p>Aenean lacinia bibendum ...