Outils pour utilisateurs

Outils du site


Panneau latéral

webdev:html_css:centrage

Centrage

Margin auto

Vertical

Centrage spécial

header > img {
    display:block;
    -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    position:relative;
    left: 50%;
}

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 !

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;
}

Stats Can I use

Centrer un élément absolu

http://stackoverflow.com/questions/17976995/how-to-center-absolute-div-horizontally-using-css

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

Centrage sur toute la page

Il faut adapter la structure de la page pour celui-ci :

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;
}
webdev/html_css/centrage.txt · Dernière modification: 02/06/2016 19:08 de dolo