-
CSS > Centrer une div à width variable
Quand la largeur d’une
div
est fixe (width:400px
), un petit coup demargin:auto
et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire…Il arrive qu’on veuille adapter la largeur d’une
div
à son contenu. Par exemple, dans un menu, on est avec une liste dont lesli
sont en float, lesquels sont bien au chaud dans leurdiv
. Vous voyez l’histoire, pourtant, cettediv
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
! 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 ladiv
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 !