Centrer des blocs et placer des blocs côte à côte¶

Un bloc est une balise dont l'affichage :

Prend 100% de la largeur du navigateur
Fais des retours de ligne automatiques et ne permet aucun autre contenu à côté

Alors comment pouvons-nous :

Centrer un bloc dans l'espace ?
Positionner des blocs côte à côte ?
Travailler avec de multiples blocs ?

Centrer un bloc¶

Pour centrer un bloc, la méthode la plus simple est de :

Diminuer sa largeur pour créer de l'espace vide
Créer des marges automatiques pour distribuer l'espace libre à gauche et à droite

HTML

<div>
    Mon bloc centré
</div>

CSS

div {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

Explication

margin-left: auto;
margin-right: auto;

Les marges gauche et droite se partagent automatiquement l'espace disponible.

Le bloc se retrouve donc centré horizontalement dans son parent.

Pour que cette technique fonctionne, le bloc doit posséder une largeur définie.

Résultat visuel

+--------------------------------+
|                                |
|         +----------+           |
|         |  BLOC    |           |
|         +----------+           |
|                                |
+--------------------------------+

Placer deux blocs côte à côte¶

Pour placer deux blocs côte à côte, on doit :

Diminuer leur largeur (changer 100% pour quelque chose de plus petit)
Modifier leur comportement de bloc pour des "blocs de flux" (inline-block)

HTML

<div>
    <div class="bloc">Bloc 1</div>
    <div class="bloc">Bloc 2</div>
</div>

CSS

.bloc {
    display: inline-block;
    width: 45%;
}

Explication

display: inline-block;

Permet à un élément de conserver les caractéristiques d'un bloc tout en pouvant s'afficher sur la même ligne qu'un autre élément.

width: 45%;

Laisse suffisamment d'espace pour afficher les deux blocs sur une seule ligne.

Résultat visuel

+--------------------------------+
| +----------+  +----------+     |
| | Bloc 1   |  | Bloc 2   |     |
| +----------+  +----------+     |
+--------------------------------+

Utiliser un Flexbox pour centrer un bloc¶

Un flexbox est un conteneur parent qui gère l'affichage de ses enfants.

Au lieu qu'un bloc se positionne lui-même, on créer plutôt un bloc parent qui va positionner le bloc enfant.

Positionner un seul bloc

HTML

<div id="conteneur">
    <div>
        Mon bloc centré
    </div>
</div>

CSS

#conteneur {
    display: flex;
    justify-content: center;
}

Explication

display: flex;

Transforme le conteneur en conteneur Flexbox.

justify-content: center;

Centre les enfants horizontalement sur l'axe principal.

Résultat visuel

+--------------------------------+
|                                |
|         +----------+           |
|         |  BLOC    |           |
|         +----------+           |
|                                |
+--------------------------------+

Utiliser un Flexbox pour placer plusieurs blocs côte à côte¶

HTML

<div id="conteneur">
    <div class="bloc">Bloc 1</div>
    <div class="bloc">Bloc 2</div>
    <div class="bloc">Bloc 3</div>
    <div class="bloc">Bloc 4</div>
</div>

CSS

#conteneur {
    display: flex;
    justify-content: space-evenly;
}

.bloc {
    width: 20%;
}

Explication

Par défaut, Flexbox place les éléments sur une même ligne.

display: flex;

Le conteneur devient une boîte flexible et positionne ses enfants un à côté de l'autre.

justify-content: space-evenly;

Distribue les enfants de façon égale dans l'espace horizontale disponible.

width: 20%;

Chaque bloc occupe 20% de l'espace disponible.

Résultat visuel

+-----------------------------------------------------+
| +----------+ +----------+ +----------+ +----------+ |    
| | Bloc 1   | | Bloc 2   | | Bloc 3   | | Bloc 4   | |   
| +----------+ +----------+ +----------+ +----------+ |   
+-----------------------------------------------------+