Ah le centrage en CSS, toute une histoire ! Quand la largeur d’une div est fixe – par exemple width: 400px – aucun problème, un petit coup de margin: auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire… Chers amis, ne désespérez pas, à tout problème une (des ?!) solutions. Allez, à l’aventure !

J’en parlais il n’y a pas si longtemps que cela, il arrive assez souvent qu’on veuille adapter la largeur d’une div à son contenu. Par exemple, dans un menu, on est souvent avec une liste dont les li sont en float, lesquels sont bien au chaud dans leur div. Vous voyez l’histoire, pourtant, cette div conteneur, on voudrait bien la centrer !

<div class="menu-wrapper">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Les tables à la rescousse

La solution, le display: table. L’astuce consiste à définir la margin à margin: 0 auto et, IE < 8 mis à part (comme d’habitude quoi…), on est bon. Ça nous donne ça en résumé :

.menu-wrapper {
    display: table;
    margin: 0 auto;
}

Vers l’infini et…

Le fit-content ! Whaaaat ? KÉZAKO ? Cette propriété CSS au nom barbare, qui n’est pour le moment pas encore standardisée, permet tout simplement de spécifier que la div prend la taille de son contenu. Grâce à cette précision, notre protégée se comportera comme si on avait définit sa largeur, magique ! Un petit exemple pour la route :

.menu-wrapper {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;   
}

Voilà, nous avons vaincu ce petit challenge assez récurrent dans nos développements. La deuxième solution n’est pas encore assez répandue pour être utilisée l’esprit léger en prod, mais elle présente une souplesse qui donne envie ! D’autres solutions dans votre chapeau magique ? Ou d’autres problèmes dans le genre ?