Centrage vertical et horizontal d'éléments de taille variable
Décidément, le respect de la sémantique nous aura donné du fil à retordre. La balise table, encore elle, permet le plus simplement du monde de centrer des éléments sur les deux axes. Le problème et que son usage se limite aux données tabulaires, exit donc son utilisation pour de la mise en page.
Demain tout ira mieux tu verras
Les navigateurs modernes (ne rigole pas, toi qui me lis du futur à travers ce flux d'information qui pénètre directement ton cerveau) nous ont apporté le display table et ses variantes. En imbriquant un élément en display table-cell dans un élément en display table, nous allons pouvoir aligner verticalement un élément inline ou, ici, inline-block :
<div class="layout">
<div class="layout-wrapper">
<div class="layout-content">
Vous êtes<br />
centré !
</div>
</div>
</div>
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.layout {
display: table;
height: 100%;
overflow: hidden;
text-align: center;
width: 100%;
}
.layout-wrapper {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.layout-content {
display: inline-block;
text-align: left; /* Retour à l'alignement classique, non nécessaire */
}
Voilà ce que ça donne en live (navigateur correcte exigé).
Ici j'applique des styles aux éléments html et body dans l'unique but que le centrage vertical se fasse par rapport à la hauteur de la fenêtre mais vous pourriez tout à fait centrer par rapport à un autre élément ou encore, appliquer des dimensions fixes à .layout.
Notez que si vous avez une meilleure idée pour le nom des différentes classes vous pouvez me la faire savoir dans les commentaires ;).
Pour ce qui est des navigateurs modernes, nous avons terminé. Si vous ne vous souciez pas d'Internet Explorer lte 7 et autre Firefox lt 3, vous pourriez très bien vous contentez du code ci-dessus.
Sur Internet Explorer lte 7 nous allons pouvoir nous approcher de ce résultat. En fait la seule différence que nous allons constater survient lorsque le contenu est plus grand (height) que le conteneur. Quand cela se produit, notre contenu sortira du conteneur par le haut ce qui est disgracieux, voir très embêtant quand ce conteneur est le body et qu'il est donc impossible de voir ce qui dépasse. Je vais sauter les explications tant ce workaround se base sur des spécificités d'Internet Explorer :
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.layout {
display: table;
height: 100%;
overflow: hidden;
text-align: center;
width: 100%;
*position: relative;
}
.layout-wrapper {
display: table-cell;
vertical-align: middle;
width: 100%;
*left: 0;
*position: absolute;
*top: 50%;
}
.layout-content {
display: inline-block;
text-align: left; /* Retour à l'alignement classique, non nécessaire */
*display: inline;
*left: 0;
*position: relative;
*zoom: 1;
*top: -50%;
}
Firefox wrap toujours deux fois
Comme l'on peut le voir ici, la valeur de display inline-block n'est supportée qu'à partir de Firefox 3. Avant cela, on doit user de propriétés vendeurs et celle qui dans le cas présent s'y prette le mieux et -moz-inline-stack. Le souci avec celle-ci c'est qu'elle empile, les unes sur les autres, toutes les lignes de l'élément (d'où son nom). Pour y remédier nous allons devoir ajouter un nouveau wrapper en display block à l'intérieur de notre élément .content. Un simple div fera l'affaire.
<div class="layout">
<div class="layout-wrapper">
<div class="layout-content">
<div>
Vous êtes<br />
centré !
</div>
</div>
</div>
</div>
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.layout {
display: table;
height: 100%;
overflow: hidden;
text-align: center;
width: 100%;
*position: relative;
}
.layout-wrapper {
display: table-cell;
vertical-align: middle;
width: 100%;
*left: 0;
*position: absolute;
*top: 50%;
}
.layout-content {
display: -moz-inline-stack;
display: inline-block;
text-align: left; /* Retour à l'alignement classique, non nécessaire */
*display: inline;
*left: 0;
*position: relative;
*zoom: 1;
*top: -50%;
}
Là nous avons fini et nous pouvons admirer le résultat.
