Notes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

====== Centrage ======
[[http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html]]\\
[[http://www.greywyvern.com/?post=323]]\\
[[https://css-tricks.com/centering-css-complete-guide/]]

**En cours**

=== Margin auto ===

=== Vertical ===

=== Centrage spécial ===
<Code:CSS>header > img {
    display:block;
    -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    position:relative;
    left: 50%;
}</Code>
[[http://caniuse.com/#search=transform]]

=== Centrage avec les flexbox ===
Utile quand l'enfant dépasse de son parent. **Le display flex annule les marges et modifie beaucoup de choses, à éviter !**
<Code:css>
parent {
    display: -webkit-flex; display: -ms-flex;
    display: flex;
    -webkit-justify-content: center; -ms-justify-content: center;
    justify-content: center;
}

enfant {   
    -webkit-flex: none; -ms-flex: none;
    flex: none;
}
</Code>
[[http://caniuse.com/#feat=flexbox|Stats Can I use]]


=== Centrer un élément absolu ===
[[http://stackoverflow.com/questions/17976995/how-to-center-absolute-div-horizontally-using-css]]

<Code:CSS>display: block;
margin-right: auto;
margin-left: auto;/* Séparation nécessaire pour IE */
position: absolute;
right: 0;
left: 0;</Code>

=== Centrage sur toute la page ===
Il faut adapter la structure de la page pour celui-ci :

<Code:CSS>html {
    height: 100%;
}

body {
    height: 100%;
}

#centrage-table {
    height: 100%;
    width: 500px;/* Doit être fixe */
    margin: auto;
    display: table;
}

#centrage-cell {
    height:100%;
    display:table-cell;
    vertical-align:middle;
}</Code>

Notes

Outils pour utilisateurs

Outils du site

Outils de la page