Introduction

Centrer horizontalement un bloc est bien plus facile que de tenter de le centrer verticalement, fort heureusement.

Cette technique pourrait permettre à bon nombre d'entre vous de produire des codes plus corrects en évitant autant que possible de créer des tableaux pour positionner vos éléments (même si c'est l'apanage de ForumActif en version PHPBB2). Un élément - pouvant être défini comme un bloc finalement - peut (doit) être centré sans avoir à passer par un enchaînement de <table> et autres <tr> <td>.

Les erreurs classiques

Beaucoup font l'erreur de penser que la balise <center> permet de centrer son contenu. Retenez une bonne fois pour toute que cette balise est obsolète et ne doit jamais être utilisée. Il en va de la maintenabilité de votre forum dans le temps, de la validité de votre code et du grand principe de "on sépare le fond de la forme nomdidiou".

De plus, et tout comme la propriété text-align: center; cela ne fonctionnera tout simplement pas puisque cela va centrer le contenu de type inline (texte, images, <span>, ...) de votre bloc et non pas le bloc lui-même.

Le CSS

A partir du moment où votre élément est un bloc et qu'il a une largeur définie, alors il devient très facile de centrer ce bloc en appliquant une marge à gauche et à droite. Et cette marge est automagiquement calculée, ce qui permet d'utiliser la propriété margin afin de centrer de manière certaine notre bloc.

Nous allons créer la classe .center-block dans le CSS de votre forum, qui nous permettra de centrer automatiquement le bloc auquel elle sera appliquée.

Rendez-vous dans Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS. Placez le code suivant :

Code:

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

display: block; permet de nous assurer que l'élément portant la classe est un élément de type block, sans quoi cela ne fonctionnerait pas. Cela signifie que votre classe fonctionnera sur n'importe quel élément (vu qu'il le transformera en élément de type block).

margin-left et margin-right prennent la valeur magique auto qui va calculer automatiquement la marge nécessaire pour centrer horizontalement l'élément.

Le HTML

Il vous suffit d'utiliser la classe fraîchement créée dans votre forum, sur votre PA par exemple ou tout autre bloc que vous souhaitez positionner au centre de son conteneur :

Code:

<div class="center-block">Mon bloc centré !..</div>

Ne pas oublier...

Définir une largeur

Pour que cela fonctionne, il faut que votre bloc ait une largeur définie. C'est normalement le cas si celui-ci contient quelque chose : le bloc va alors prendre toute la largeur disponible (conceptuellement parlant, on peut considérer qu'il est centré du coup ).

Si votre bloc ne contient rien mais qu'il doit tout de même s'afficher, ou que vous souhaitez tout simplement fixer sa largeur, il vous faudra penser à lui définir une largeur spécifique avec width. Comme cette largeur est spécifique à votre élément, il est préférable de créer une autre sélecteur, qui va cibler votre élément pour lui rajouter une largeur, de la manière suivante (par exemple) :

Code:

.center-block {
    display: block;
    margin: 0 auto;
}

.large-block {
    width: 400px;
}

Code:

<div class="large-block center-block"></div>

Le but étant d'isoler la classe .center-block pour qu'elle remplisse exclusivement son rôle : centrer votre élément. C'est une bonne pratique de CSS à prendre qui consiste à créer des classes réutilisables.

Centrer verticalement

A ce stade-là vous pourriez penser que :

Votre fausse bonne idée a écrit:

... c'est super le truc du margin: auto ! Du coup, pour centrer verticalement, il suffit de définir une hauteur au bloc et d'appliquer une marge automatique en haut et en bas ! Et, et, ...

... et malheureusement, ça ne marche pas comme ça.

Il faut employer d'autres techniques pour contourner le problème et je dois reconnaître que ce n'est véritablement pas une chose aisée.

Ce sera l'objet d'un deuxième (plus gros) tutoriel sur la question, afin de vous présenter les "meilleures techniques" que je connaisse à l'heure actuelle afin de centrer facilement et le plus correctement possible vos éléments.