Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Ah, le centrage des blocs… Sujet délicat.
Je vous présente ici une méthode qui marche pour tous les navigateurs, propre et valide.
On va voir comment centrer nos blocs horizontalement, et/ou verticalement. Ainsi, vos messages d'erreurs (404/403, que sais-je encore) ne seront plus sur le côté, en haut, …
Suivez le guide !
Introduction
La partie la plus facile !
En fait, vous avez trois cas de figure :
- Vous connaissez sa largeur en pourcentage
- Vous connaissez la largeur de votre bloc en unités (px, pt, em, ?)
- Vous ne connaissez pas sa largeur
Ces trois cas de figure correspondront à 3 sous-sous-parties.
Ah, on aura aussi besoin d'un exemple :
Code : HTML - Exemple (x)HTML1
2
3 | <div class="bloc_centre">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam elit metus, fermentum a, hendrerit sed, luctus sit amet, tellus. Etiam faucibus est eu velit. Morbi tristique vulputate sem. Nam et lacus. Donec ac turpis. Donec bibendum interdum velit. Quisque egestas, neque ac elementum mattis, dui arcu facilisis mauris, sit amet hendrerit lacus mauris vitae felis. Aliquam erat volutpat. Sed sapien purus, ultricies vitae, pretium et, cursus eget, purus. Praesent elit. Sed eros. Nullam lacinia ante non nunc.
</div>
|
1. Vous connaissez la largeur en %
Ce cas de figure arrive surtout pour les designs extensibles. C'est aussi le plus simple à gérer.
Vous avez donc ce CSS-ci :
Code : CSS - Exemple CSS1
2
3
4
5 | .bloc_centre{
?
width:60%;
?
}
|
Rajoutez simplement la ligne suivante, qui va éloigner votre bloc du bord de sa moitié :
Code : CSS - Exemple CSS1
2
3
4
5
6 | .bloc_centre{
?
width:60%;
margin-left:20%;
?
}
|
Evidemment, si votre bloc faisait 50% de large, vous devez faire votre margin-left de 25% !
Et c'est tout ! Je vous avais dit que c'était le cas le plus simple.
2. Vous connaissez la largeur en unités
On a souvent ça pour les designs fixes. Votre CSS est (par exemple) le suivant :
Code : CSS - Exemple CSS1
2
3
4
5 | .bloc_centre{
?
width:400px;
?
}
|
Là, on va d'abord coller notre bloc au milieu, puis le faire
reculer de moitié pour qu'il soit vraiment centré :
Code : CSS - Exemple CSS1
2
3
4
5
6
7
8 | .bloc_centre{
?
width:400px;
position:absolute;
left:50%;
margin-left:-200px;
?
}
|
Là, si votre bloc faisait 500px de large, vous auriez dû appliquer un margin-left de -250px.
3. Vous ne connaissez pas la largeur
Elle est en fait valable pour tous les cas de figure. Néanmoins, vous devrez adapter votre CSS pour rétablir l'alignement du texte dans tous vos autres blocs. Changez juste votre CSS comme ceci :
Code : CSS - Exemple CSS 1
2
3
4
5
6
7
8
9
10 | body{
?
text-align:center;
?
}
.bloc_centre{
?
text-align:left;
?
}
|
Note : ne rajoutez le text-align:left uniquement si vous voulez que le texte dans votre div soit centré.
Ah, on attaque le vif du sujet !
Là encore, les 3 mêmes cas de figure.
1. Vous connaissez la hauteur en %
Modifiez votre CSS exactement comme tout à l'heure :
Code : CSS - Exemple CSS1
2
3
4
5
6 | .bloc_centre{
?
height:60%;
margin-top:20%;
?
}
|
Facile, n'est-ce pas ?
2. Vous connaissez la hauteur en unités
Là encore, c'est simplissime :
Code : CSS - Exemple CSS1
2
3
4
5
6
7
8 | .bloc_centre{
?
height:200px;
position:absolute;
top:50%;
margin-top:-100px;
?
}
|
3. Vous ne connaissez pas la hauteur
Bon, là, on va quitter le "sémantiquement correct". En effet, la seule façon de centrer vos blocs verticalement sera de les mettre dans un tableau qui englobera votre page.
Ce n'est pas correct sémantiquement, mais c'est tout à fait valide !
Modifiez votre (x)HTML comme suit :
Code : HTML - Exemple (x)HTML1
2
3
4
5
6
7 | <table>
<tr>
<td class="bloc_centre">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam malesuada. In hac habitasse platea dictumst. Aliquam nec erat sed ante consequat sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mattis, augue id mattis pulvinar, diam massa rutrum nisl, et elementum justo ipsum a ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at nisl sit amet mi aliquam consectetuer. Phasellus eleifend lacus id massa. Nunc egestas interdum justo. Etiam ornare lorem tempus libero.
</td>
</tr>
</table>
|
Maintenant, changez votre CSS comme ça :
Code : CSS - Exemple CSS1
2
3
4
5 | .bloc_centre{
?
vertical-align:center;
?
}
|
Cette méthode est moche, vilaine, à proscrire !
Prenez autant que possible les autres !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
177 Zéros connectés |
8 requêtes |
0.0807s (0.071s)
