如何水平居中的可变宽度的浮动元件？如何水平居中的可变宽度的浮动元件？(How to horizont

如何水平居中的可变宽度的浮动元件？

编辑：我已经有此工作使用含div为浮动元件和指定width为所述容器（然后使用margin: 0 auto;用于容器）。我只是想知道是否可以在不使用含元素或完成至少不必指定一个width为包含的元素。

Answer 1:

假设其被浮起而将居中的元件是div与id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

并应用下面的CSS：

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

这里是一个很好的参考关于这一点。

Answer 2:

.center {
  display: table;
  margin: auto;
}

Answer 3:

假设你有一个DIV你想水平居中：

 <div id="foo">Lorem ipsum</div>

在CSS你用这种风格吧：

#foo
{
  margin:0 auto; 
  width:30%;
}

其中规定，你有零个像素的顶部和底部边缘，并在左或右，自动计算出需要多少为偶数。

其实并不重要，你放什么在宽度，只要它的存在，而不是100％。否则，你就不会设置任何东西的中心。

但是，如果你浮起来，向左或向右，则全盘皆输，因为，拉出来的元素在页面上的正常流动和自动页边距设置将不起作用。

Answer 4:

您可以使用fit-content值width 。

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

注意：只能在最新的浏览器。

Answer 5:

流行的答案在这里有时确实工作，但其他时候，它会创建水平滚动条是很难对付 - 尤其是宽的水平导航和大型下拉菜单的时候。下面是一个更轻的重量的版本，有助于避免这些边缘情况：

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

证据证明它的工作！

为了更具体地回答你的问题，它可能是没有可能建立一些含有元素的事，但它是非常有可能的，而不指定宽度值做。希望节省有人在那里有些头疼！

Answer 6:

这工作当ID =容器（其是外层div）和id =含有更好（这是内DIV）。与强烈推荐解决方案的问题是，它导致在某些情况下进入时，浏览器正试图迎合左侧有一个水平滚动条：-50％属性。这是一个很好的参考这个解决方案

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }

Answer 7:

你就不能使用display: inline block ，并align到center ？

实例。

文章来源: How to horizontally center a floating element of a variable width?