Question

如何设置DIV的宽度与设置float:left时的宽度相似，但是没有设置浮动？ width:auto似乎没有这样做（在chrome中）。

我正试图让以下内容起作用......

.center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

Answer 1

带内联块的解决方案

您可以尝试display: inline-block，看看它是否适用于您的情况。但是，您无法使用margin-left: auto＆amp; margin-right: auto因为该技术需要宽度值。

如果可能，请使用display: inline-block并在其容器上设置text-align: center。

<div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

使用Flexbox +容器div的解决方案

上面的原始答案是在2011年写的，之前是flexbox实现的。你可以达到类似的效果

<div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

如果没有父元素，还有另一种方法可以做到这一点。

.center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Answer 2

对于那些仍然遇到此问题的人，现在你可以通过以下方式解决这个问题：

<div>
  <div style="display: table; margin: auto">
    This will expand only as far as it needs to
  </div>
</div>

根据接受的答案，这是一个新的小提琴：http://jsfiddle.net/j33qL8pa/1/

Answer 3

我认为现在有效：

.center
{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

Answer 4

<div>是块元素。它们占据了容器的整个宽度。期。就像<body>或<html>

一样

您的上述规则基本上是这样做的： div { width:100%; margin:0 auto; }为100％是其自动值。

inline-block会起作用，但它不会像真正的inline-block元素一样工作。

基本上......如果没有设置宽度，定位它就无法做到。

如果你采用内联阻止路线，请阅读这篇文章...你最终可能会对你的CSS预期进行一些意想不到的战斗。