Existe-t-il une valeur css pour tous les navigateurs pour «width: -moz-fit-content»?

J’ai besoin que certaines div soient positionnées au centre et correspondent à la largeur de leur contenu en même temps.

Je le fais maintenant comme ceci:

.mydiv-centerer{ text-align: center; .mydiv { background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; width: -moz-fit-content; } } 

Maintenant, la dernière commande “width: -moz-fit-content;” est exactement ce dont j’ai besoin!

Seul problème, c’est que ça marche seulement sur Firefox.

J’ai aussi essayé avec “display: inline-block;” , mais j’ai besoin de ces divs pour se comporter comme des divs. À savoir, chaque div suivant doit être sous et non pas en ligne avec le précédent.

Connaissez-vous une solution inter-navigateur possible?

Enfin, je l’ai réparé simplement en utilisant:

 display: table; 

Le MDN de Mozilla suggère quelque chose comme le suivant [ source ]:

  p { width: insortingnsic; /* Safari/WebKit uses a non-standard name */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ } 

Y a-t-il une seule déclaration qui corrige cela pour Webkit, Gecko et Blink? Cependant, il existe une solution multi-navigateurs en spécifiant plusieurs valeurs de propriété de largeur correspondant à la convention de chaque moteur de présentation.

 .mydiv { ... width: insortingnsic; /* Safari/WebKit uses a non-standard name */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ ... } 

Adapté de: MDN

Dans le cas similaire, j’ai utilisé: white-space: nowrap;

Pourquoi ne pas utiliser des br ?

 
Some content

More content than before

Here is a lot of content that I was not anticipating

CSS

 .mydiv-centerer{ text-align: center; } .mydiv{ background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; display:inline-block; } 

Exemple: http://jsfiddle.net/YZV25/

Je les utilise:

 .right {display:table; margin:-18px 0 0 auto;} .center {display:table; margin:-18px auto 0 auto;}