OpenWeb - Centrage CSS - Exemples

Cette page illustre différents exemples utilisés dans Initiation au centrage CSS.

Centrage d'une boîte élastique par des marges spécifiées

Code HTML :

<div class="constantes">...</div>
<div class="proportionnelles">...</div>

Code CSS :

.constantes {
margin: 1em 50px;
background-color: #ffff00;
border: 1px solid #000000;
padding: 0.5em;
}
.proportionnelles {
margin: 1em 15%;
background-color: #ffff00;
border: 1px solid #000000;
padding: 0.5em;
}

Le résultat :

Boîte centrée avec marges constantes de 50 pixels

Boîte centrée avec marges proportionnelles de 15% de la zone d'affichage : la largeur de la boîte s'adapte à la dimension de la zone d'affichage.

Centrage d'une boîte élastique par des marges calculées

Code HTML :

<div class="conteneur1">
<div class="centre1">...</div>

Code CSS :

.conteneur1 {
text-align: center;
}
.centre1 {
margin-left: auto;
margin-right: auto;
width: 70%;
text-align: left;
background-color: #ffff00;
border: 1px solid #000000;
padding: 0.5em;
}

Le résultat :

Boîte centrée avec marges calculées de 15% de la zone d'affichage : la largeur de la boîte s'adapte à la dimension de la zone d'affichage.

Centrage d'une boîte rigide en pixels

Code HTML :

<div class="conteneur1">
<div class="centre2">...</div>

Code CSS :

.conteneur1 {
text-align: center;
}
.centre2 {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align: left;
background-color: #ffff00;
border: 1px solid #000000;
padding: 0.5em;
}

Le résultat :

Boîte rigide centrée avec marges calculées en pixels : la largeur de la boîte est constante.

Centrage d'une boîte rigide en em

Code HTML :

<div class="conteneur1">
<div class="centre3">...</div>

Code CSS :

.conteneur1 {
text-align: center;
}
.centre3 {
margin-left: auto;
margin-right: auto;
width: 20em;
text-align: left;
background-color: #ffff00;
border: 1px solid #000000;
padding: 0.5em;
}

Le résultat :

Boîte rigide centrée avec marges calculées en em : la largeur de la boîte est proportionnelle à la taille des caractères.

Centrage d'une boîte rigide, variante des marges négatives

Code HTML :

<div class="centre4">...</div>

Code CSS :

 
.centre4 {
position: relative;
left: 50%;
width: 400px;
margin-left: -200px;
}

Le résultat est équivalent au centrage d'une boîte rigide en pixels :

Boîte rigide centrée avec marges négatives : la largeur de la boîte est constante.