Centrer un bloc (div) en CSS

Partagez si vous aimez ->

Centrer verticalement un bloc

Vous souhaitez centrer verticalement un bloc en CSS ? Je vous propose de voir cela ensemble ci-dessous.

CSS

div.conteneur-gris-v {
height: 100px; /* Ces deux lignes... */
line-height: 100px; /* ...centrent le bloc vert verticalement */
}
div.center-bloc-vert-v {
display: inline-block; /* Transforme l'élément "bloc" en "inline" */
height: 40px; /* Vous devez spécifiez une hauteur */
line-height: 1.2; /* Rétablit la hauteur de la ligne */
vertical-align: middle; /* Ajuste le centrage vertical */
}

HTML


<div class="conteneur-gris-v">

<div class="center-bloc-vert-v">Ce bloc vert est centré verticalement</div>

</div>

Résultat

Centrer horizontalement un bloc

Vous préférez plutôt centrer votre bloc horizontalement ? C’est ci-dessous qu’il faut voir ça !

CSS

div.conteneur-gris-h {
height: 100px; /* Vous devez spécifiez une hauteur */
}

div.center-bloc-vert-h {
margin: 0 auto; /* Centre le block horizontalement */
width: 50%; /* Vous devez spécifiez une largeur */
}

HTML


<div class="conteneur-gris-h">

<div class="center-bloc-vert-h">Ce bloc vert est centré horizontalement</div>

</div>

Résultat

Ce bloc vert est centré horizontalement

Centrer verticalement et horizontalement un bloc

CSS

div.conteneur-gris-v-h {
background: #DDDDDD;
height: 100px; /* Ces deux lignes... */
line-height: 100px; /* ...centrent le bloc vert verticalement */
text-align: center; /* Centre les éléments de type "inline" contenus dans ce bloc */
}
div.center-bloc-vert-v-h {
display: inline-block; /* Transforme l'élément de type "bloc" en type "inline" */
height: 40px; /* Vous devez spécifiez une hauteur */
line-height: 1.2; /* Rétablit la hauteur de la ligne */
text-align: left; /* Rétablit le centrage du texte */
vertical-align: middle; /* Ajuste le centrage vertical */
width: 50%; /* Vous devez spécifiez une largeur */
}

HTML


<div class="conteneur-gris-v-h">

<div class="center-bloc-vert-v-h">Ce bloc vert est centré verticalement et horizontalement</div>

</div>

Résultat

Ce bloc vert est centré verticalement et horizontalement

 

Partagez si vous aimez ->

Youcef

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons