Centrer les blocs

Centrer un bloc

On ne centre pas un bloc de la même manière que l'on centre son contenu.

Pour centrer le texte au sein d'un bloc, il suffit de la propriété text-align:
center;, alors que pour centrer un bloc la méthode est très différente.

// Centrer horizontalement.

Pour centrer horiontalement, il faut que les marges de gauche et de droite soient
égales, mais comme la largeur de page peut varier, il existe une valeur qui permet de
calculer automatiquement la marge la plus équitable : auto.

Pour pouvoir centrer le bloc, il est obligatoire de préciser la largeur du bloc, ce
qui est assez logique.

Nous utilisons donc le code

    1  .bloc
    2    {
    3      width: 500px;
    4      margin-left: auto;
    5      margin-right: auto;
    6    }
        
Mais pour économiser une ligne, il est également possible, si vous vous
souvenez, de faire : 

    1  .bloc
    2    {
    3      width: 500px;
    4      margin: 0px auto;
    5    }

Malgrès tout, avant la version 6 d'internet explorer, il faut utiliser la syntaxe text-align:center sur l'élément parent du bloc.

Ensuite, pour corriger le décalage du texte sur les blocs, il suffit de replacer un text-align: left; sur le bloc.

Par exemple :

    1  body
    2    {
    3      text-align: center;
    4    }
    5
    6  .bloc
    7    {
    8      width: 500px;
    9      margin: 0px auto;
    10     text-align: left;
    11    }

// Centrer verticalement

Il n'existe pour l'instant qu'une seule méthode pour centrer correctement un bloc
verticalement, sous tous les navigateurs.

Il faut utiliser ce que l'on appelle les marges négatives, qui permettent de centrer à
la fois verticalement et horizontalement. C'est ce que nous allons faire, il ne vous restera plus qu'à adapter dans le cas où l'on souhaite centrer horizontalement uniquement.

Il faut en premier choisir la largeur et la hauteur du bloc, utiliser la position absolue
(ou fixe), et placer le bloc à 50% du bord supérieur et du bord droit. Ensuite, il faut préciser la marge du haut, sa valeur doit être la moitié de la hauteur du bloc, mais en négatif. Même principe pour la marge de gauche, mais cette fois ci avec la moitié de la largeur.

Note : Cette méthode n'est valable que pour un bloc dont la largeur et/ou la hauteur
sont fixes (donc en px).

Par exemple, pour un cadre qui fait 700px de largeur et 400px :

    1  .cadre
    2    {
    3      width: 700px;
    4      height: 400px;
    5      position: absolute;
    6      top: 50%;
    7      left: 50%;
    8      margin-top: -200px;
    9      margin-left: -350px;
   10      border: 1px red solid;
   11    }
           
Je vous laisse imaginer le code HTML à utiliser.

 Vous pouvez voir le résultat de ces techniques sur la page d'exemple n°11.        
Librement inspiré de l'article "Centrer les éléments ou un site web en CSS" d'Alsacreations. 
             
   > retour au sommaire

             
   > voir la suite