Cette page illustre différents exemples utilisés dans Initiation au centrage CSS.
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 :
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 :
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 :
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 :
em
: la largeur de la boîte est proportionnelle à la taille des caractères.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 :
Accueil OpenWeb | Plan du site | Conditions de réutilisation
Cette page est valide Xhtml et Css
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi