css跨浏览器的值是否为“ width：-moz-fit-content;”？

我需要一些div居中放置并同时适合其内容宽度。

我现在这样做：

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

现在，最后一个命令“ width：-moz-fit-content;” 是正是我所需要的！

唯一的问题是..它仅在Firefox上有效。

我还尝试了“ display：inline-block;” ，但我需要这些div表现得像div一样。也就是说，每个下一个div应该位于上一个之下，而不是内联。

您知道任何可能的跨浏览器解决方案吗？

最后，我使用以下命令修复了它：

display: table;

Mozilla的MDN建议类似以下[来源]：

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

在类似情况下，我使用了： white-space: nowrap;

是否有一个针对Webkit，Gecko和Blink修复此问题的声明？否。但是，存在跨浏览器解决方案，方法是指定多个宽度属性值，这些值对应于每个布局引擎的约定。

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

改编自：MDN

我用这些：

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

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

为什么不使用一些br？

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

的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;
}

示例： http ：//jsfiddle.net/YZV25/