Retournez à Accueil /

Quel webmaster ne s'est pas amusé un jour où l'autre à essayer de centrer plusieurs blocs horizontalement ?
A mon humble avis aucun ou du moins très peu ;-) .
Je vous propose aujourd'hui une solution responsive (qui s'adapte à la résolution des visiteurs).


Bloc 1

Oh !
Un jolie bloc !!

Bloc 2

Ce bloc n'a pas de largeur définie.

Bloc 3
Le bloc 3

Ce sont ces blocs que je souhaite centrer.

Très simple, il me suffit d'appliquer des marges automatiques à son conteneur (margin-left:auto; margin-right:auto;) ! Eh bien non, ce n'est pas possible.
En effet, pour utiliser ces marges le conteneur doit avoir une taille définie, mais je ne connais pas la taille de mes blocs donc si j'applique ces marges le conteneur sera lui centré mais pas mes blocs.

La solution que je vous propose ci-dessous est d'utiliser display:inline-block sur vos blocs ce qui permet de les afficher sur la même ligne et de leur appliquer des styles habituellement réservés aux éléments de type inline.

Ainsi, plus besoin de flottante pour afficher des blocs sur la même ligne.

Pour centrer vos blocs il suffit de centrer le texte dans le conteneur en utilisant text-align:center; . Si le conteneur est plus petit que la taille totale des blocs alors une nouvelle ligne sera créée et les blocs seront également centrés, cette solution s'adapte donc à la résolution du visiteur, c'est du responsive design.

Bloc 1

Oh !
Un jolie bloc !!
 
Bloc 2

Ce bloc n'a pas de largeur définie.
 
Bloc 3

Le bloc 3
 
Pour centrer les blocs verticalement entre eux, il suffit d'utiliser vertcial-align:middle; qui est une propriété réservée aux éléments inline et du coup fonctionnant sur les inline-block.

Le code CSS

#conteneur
{
    /* Placez le style du conteneur ici, seul al ligne ci-dessous est nescessaire. */
    text-align:center;
}
.bloc
{
    display:inline-block; /* Pour que la magie opere */
    text-align:left; /* Pour retablir l'alignement du texte apres c'est à vous de voir */
    vertical-align:middle; /* Pour centrer verticalement nos blocs */
}
Le code HTML
<div id="conteneur">
    <div class="bloc">
        <h3>Bloc 1</h3>
        <p>Oh !</p>
        <p>Un jolie bloc !!</p>
    </div>
    <div class="bloc">
        <h3>Bloc 2</h3>
        <p>Ce bloc n'a pas de largeur définie.</p>
        <p>Pourtant, il se centre bien !</p>
    </div>
    <div class="bloc">
        <h3>Bloc 3</h3>
        <p>Le bloc 3</p>
    </div>
</div>


J'ai utilisé des div mais ça marche très bien avec des listes aussi ! N'hésitez pas à jeter un coup d'oeil sur le page d'exemples, c'est parfois plus simple à comprendre quand c'est visuel.


- Mots clés : aucun