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

Image non disponible

Dernièrement, je lisais un excellent article sur le centrage horizontal par Roger Johansson dans lequel il explique l'effet d'adaptation des dimensions d'un élément à son contenu. Il s'agit d'un des problèmes les plus courants que vous puissiez rencontrer, à savoir comment centrer un élément (par exemple une barre de navigation) ne contenant que des éléments flottants.

Comme nous le savons tous, centrer ce type de contenu peut parfois devenir compliqué et piégeux. En partant de cet exemple usuel, Roger dresse une liste assez complète de solutions pour parvenir à centrer le menu.

Cet article est la traduction de Horizontal centering using CSS fit-content value publié sur Red Team Design.

Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Une autre approche possible

Image non disponible

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.

II. Exemple concret

En reprenant le balisage de Roger :

 
Sélectionnez

<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 :

 
Sélectionnez

.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.

III. Un support minimal mais de grandes promesses

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.

IV. Remerciements

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Catalin Rosu. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.