Centrage horizontal avec la propriété CSS fit-content

Voir la démo en ligne.

Récemment, j'ai découvert que Firefox et Chrome supportent tous les deux les valeurs intrinsèques et l'une des valeurs les plus intéressantes pour la propriété width me semble être fit-content.
Dans cet article, je vais vous montrer comment fit-content peut être la solution au problème évoqué en introduction.

Apparemment, tout comme pour les tables, si vous avez seulement besoin d'affecter la valeur auto aux marges externes d'un élément pour le centrer, affecter width: fit-content; à un élément permet d'indiquer au navigateur que la largeur de cet élément sera définie par son contenu et ne sera pas automatiquement calculée pour remplir son élément conteneur.

En reprenant le balisage de Roger :

<div class="navbar center">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About us</a></li>
        <li><a href="/">Our products</a></li>
        <li><a href="/">Customer support</a></li>
        <li><a href="/">Contact</a></li>
    </ul>
</div>

et en ajoutant quelques lignes de CSS :

.center ul{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;   
}

… vous obtenez une solution expérimentale pour centrer vos barres de navigation horizontalement, même si elles ne contiennent que des éléments flottants.
Relativement simple non ? N'hésitez pas à consulter la page de démonstration pour voir le code plus en détail.

Voir la démo en ligne.

Malgré une compatibilité minimale des navigateurs (juste Firefox et Chrome à l'heure actuelle), cela reste une bonne astuce à mémoriser pour l'avenir.
Souvenez-vous du module CSS flexbox à ses débuts, son support était minimal mais il s'étend de jour en jour.

Méfiez-vous cependant que fit-content est encore une valeur expérimentale et n'est pas encore au stade de recommandation. Elle est tout juste à l'état de brouillon auprès du W3C et ses spécifications sont donc susceptibles de changer dans le futur.

Cet article a été publié avec l'aimable autorisation de Catalin Rosu. L'article original (Horizontal centering using CSS fit-content value) peut être vu sur le site Red Team Design.

Nous tenons à remercier _Max_ pour sa relecture attentive de cet article.