Introduction
La partie la plus facile ! :p 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. :D
Ah, on aura aussi besoin d'un exemple : :p
<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>
Texte généré grâce à lipsum.org.
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 :
.bloc_centre{
?
width:60%;
?
}
Rajoutez simplement la ligne suivante, qui va éloigner votre bloc du bord de sa moitié :
.bloc_centre{
?
width:60%;
margin-left:20%;
?
}
Evidemment, si votre bloc faisait 50% de large, vous devez faire votre margin-left de 25% ! :p
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 :
.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é :
.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 :
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é. :)