Sur le même sujet
Le code (X)HTML étant le suivant :
<body>
<div id="page">
<h1>Bonjour</h1>
<p>chez vous...</p>
</div>
</body>Centrer horizontalement
Pour centrer horizontalement le contenu d’une page dans la fenêtre du navigateur en CSS, il suffit d’assigner une largeur fixe ou relative à #page, et de lui donner des marges auto :
#page {
width: 500px; /* ou width:70%; ou width:20em; */
margin-left: auto;
margin-right: auto;
}La boîte <div id="page"> sera centrée proprement dans <body> .
Maheureusement, Internet Explorer pour Windows ne comprend pas cette directive logique et il faut tricher.
Pour que ça fonctionne sous toutes les versions de navigateurs, il faut aussi assigner à body la propriété text-align : center.
Donc :
body {
text-align: center;
}Mais comme cette propriété est héritée, tous les éléments à l’intérieur de body seront aussi centrés. Il faut donc rétablir l’alignement à gauche du texte pour <div id="page"> et tous les éléments qu’il contient. Ce qui nous donne :
#page {
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: left;
}Une autre technique, moins intuitive, mais qui fonctionne aussi fort bien, consiste à placer de façon absolue le côté gauche de la boîte au centre de la fenêtre, puis ensuite de décaler la boîte vers la gauche de la moitié de sa largeur [width + (2 x border) + (2 x padding)].
#page {
position: absolute;
left: 50%;
width: 500px;
padding: 15px;
border: 1px dashed #333;
margin-left: -266px;
}Cette méthode est un peu plus restrictive car
1. elle exige que la largeur de la boîte soit fixée avec des valeurs absolues (px, mm, etc…)
2. à cause du modèle de boîte particulier de Internet Explorer 5.x sous Windows, il faut ajouter une division (#contenu dans notre exemple) à l’intérieur de #page pour prendre en compte l’épaisseur de la bordure (border) et l’espace entre le texte et la bordure (padding).
Ce qui donne ceci pour le code HTML :
<div id="page">
<div id="contenu">
<h2>Centrer...</h2>
<p>La boîte...</p>
</div>
</div>Et ceci pour le code CSS :
#page
{
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
margin-top: 30px;
}
#contenu { margin: 1em; }Voilà pour le centrage horizontal.
Centrer horizontalement ET verticalement
Pour centrer horizontalement et verticalement une boîte de dimension fixe dans une fenêtre, nous allons pousser un peu plus loin la méthode que nous venons d’explorer.
Nous utiliserons le même code HTML que dans l’exemple précédent :
<div id="page">
<div id="contenu">
<h1>Bonjour</h1>
<p>chez vous...</p>
</div>
</div>Et ceci pour le code CSS :
#page
{
position: absolute;
width: 300px; /* selon la largeur voulue */
margin-left: -150px; /* moitie de width */
left: 50%; /* constant, toujours 50% */
height: 120px; /* selon la quantite de texte */
margin-top: -60px; /* moitie de height */
top: 50%; /* constant, toujours 50% */
border: 1px solid #333;
background-color: #eee;
}
#contenu { margin: 1em; }Cette dernière méthode est particulièrement simple pour un contenu de dimension fixe comme une image, une vidéo ou une animation de type Flash.
Par contre, si nous désirons que la dimension de la boîte soit fluide ou élastique et puisse se redimensionner en fonction d’un contenu textuel et puisse produire un effet de zoom avec l’augmentation du corps du texte, tout en restant centré horizontalement et verticalement, il faudra indiquer des valeurs relatives, comme ceci :
#page
{
position: absolute;
width: 12em; /* selon la largeur voulue */
margin-left: -6em; /* moitie de width */
left: 50%; /* constant, toujours 50% */
height: 8em; /* selon la quantite de texte */
margin-top: -4em; /* moitie de height */
top: 50%; /* constant, toujours 50% */
border: 1px solid #333;
background-color: #eee;
}
#contenu { margin: 1em; }
Voir aussi une autre méthode un peu plus tordue :
Remarque s’appliquant aux diverses méthodes précédentes : le positionnement absolu en % pour top ne fonctionne pas avec Internet Explorer Mac. Heureusement, ce navigateur est en voie de disparition. Il existe bien une bidouille (hack) pour régler ça, mais ça déborderait largement les propos de cet article.
(Inspiré librement de :
Texte original de cet article : sur http://edu.ca.edu/article207.html, sous licence Creative commons.
Mis en ligne le mercredi 21 mars 2007
Generationcyb.net est motorisé par Spip 1.9.2c
associé à un squelette graphique Rizom
