home home2 home3 newspaper pencil quill image camera headphones music play film connection book books cart coin-dollar coin-euro coin-pound coin-yen credit-card lifebuoy phone phone-hang-up envelop pushpin location location2 printer display laptop mobile mobile2 tablet tv download upload user users user-plus user-minus user-check user-tie quotes-left quotes-right spinner search zoom-in zoom-out lock unlocked wrench cog cogs pie-chart stats-dots stats-bars trophy gift hammer2 bin switch eye star-empty star-full heart plus minus checkmark play3 share2 google-plus2 google-plus3 facebook2 instagram twitter rss2 youtube youtube2 wordpress joomla tux appleinc windows skype paypal

Cette page vous présente différentes techniques utilisées sur le web pour centrer horizontalement ou/et verticalement du contenu.

Centrer horizontalement le contenu d'un paragraphe

Avec le langage CSS, c'est avec l'instruction text-align : center; que ceci s'effectue.

<p style="text-align : center;">Un paragraphe centrer</div>

Exemple :

Un paragraphe centrer


Centrer horizontalement un bloc dans une page

On utilise pour ce faire, un <div> avec l'instruction CSS margin : auto; pour la largeur du paragraphe.
Pour que cette technique fonctionne, une condition sine qua none : préciser la largeur de ce paragraphe (en px ou en %).

<div style="width: 200px; margin : auto;">Un DIV de 200px de large</div>

Exemple avec un fond bleu clair :

Un DIV de 200 px de large

Centrer horizontalement le bloc dans une page et son contenu

Il faudra alors combiner les deux.

<div style="text-align: center; width: 200px; margin : auto;">Un DIV de 200px de large<br />et son contenu également</div>

Exemple avec un fond bleu clair et un petit padding de 10px :

Un DIV de 200 px de large
et son contenu également

Centrer horizontalement un bloc sans pouvoir définir sa largeur

L'objectif étant aussi de ne pas centrer le contenu du bloc mais de l'aligner à gauche

Il va alors falloir ici créer deux DIV, aligner le contenu du premier, puis définir la largeur du second à 50%, rétablir le placement du contenu à gauche et centrer le bloc.

<div style="text-align: center;">
   <div style="width: 50%; text-align: left; margin: 0 auto;">Block centrer<br />sans en connaître sa largeur</div>
</div>

Exemple :

Block centrer
sans en connaître sa largeur

Notez que cette technique est aussi Responsive !


Aligner verticalement une image au milieu d'un paragraphe

Il est parfois nécessaire qu'une image, un bouton... soit aligné verticalement avec le texte qui précède ou/et suive

C'est avec l'instruction CSS vertical-align : middle; que ceci s'effectue.

<img style="vertical-align : middle;" src="mon-image" alt="description" />

Exemple :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Sans vertical-align cela donnerait :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Pour réinitialiser cette propriété CSS "à zéro", l'instruction est vertical-align: initial;


Centrer verticalement et horizontalement tout un site

Il faut déclarer avant tout que le site fait 100% de hauteur et de largeur, avec marges et padding à zéro.
Ensuite déclarer un conteneur pour le site à centrer dont la position sera relative et la taille déterminée, mais la feuille de style parle d'elle même :

alignement_auto.css

html, body, table, td {
height : 100%;
width : 100%;
margin : 0;
padding : 0;
background-color : #000;
color : #FFF;
}

#conteneur {
position : relative;
margin : 0 auto;
width : 958px;
height : 750px;
border : 2px solid #EEE;
}

Avec dans la page HTML, cette structure :

<html>
  <body>
     <table>
        <tr><td>
              <div id="conteneur">
                 LE CONTENU DU SITE SERA ICI
              </div>
        </td></tr>
     </table>
  </body>
</html>

Le site sera ainsi centré verticalement et horizontalement, quelque soit la résolution de l'écran du visiteur.

Pour voir le rendu de cette feuille de style, vous pouvez visiter ce site réalisé par les Hirondelles Du Net.
Ensuite pour tester ce code, jouez avec la taille de la fenêtre de votre navigateur...

A noter que ce code est un peu désuet aujourd'hui avec l'avènement des sites web adaptatifs, mais pour certains projets au design fixe, il pourra encore servir.

Voici le code complet en HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />

    <style type="text/css">
      html, body, table, td {
        height : 100%;
        width : 100%;
        margin : 0;
        padding : 0;
        background-color : #000;
        color : #FFF;
      }

      #conteneur {
        position : relative;
        margin : 0 auto;
        width : 958px;
        height : 750px;
        border : 2px solid #EEE;
      }
    </style>
  </head>

  <body>
    <table>
      <tr><td>
          <div id="conteneur">
             LE CONTENU DU SITE SERA ICI
          </div>
      </td></tr>
    </table>
  </body>
</html>

Si vous êtes préoccupé par le côté sémantique et opposé à la structuration en tableau, je vous invite à lire cet article en anglais : Centering in the Unknown qui présente en sus une approche intéressante lorsque l'on ignore les dimensions de l'élément enfant (voir de son parent).

 

Logo des hirondelles du net

Le néant n'a point de centre, et ses limites sont le néant