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 :
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 :
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 :
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
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 :
<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 :
<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).
Vous avez aimé cet article, partagez-le !
Le néant n'a point de centre, et ses limites sont le néant