58

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

编辑：我已经使用包含div浮动元素并为容器指定a width（然后margin: 0 auto;用于容器）来进行此工作。我只是想知道它是否可以在不使用包含元素的情况下完成，或者至少不必width为包含元素指定 a 。

4

8 回答 8

91

假设浮动并居中的元素是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%;
}

这是一个很好的参考。

于 2009-08-05T10:06:50.893 回答
75 
.center {
  display: table;
  margin: auto;
}
于 2012-04-10T22:54:48.473 回答
6

您可以fit-content使用width.

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

注意：它仅适用于最新的浏览器。

于 2013-08-13T10:17:22.023 回答
5

当 id = 容器（即外部 div）和 id = 包含（即内部 div）时，这会更好。强烈推荐的解决方案的问题是，在某些情况下，当浏览器试图迎合 left:-50% 属性时，它会导致水平滚动条。这个解决方案 有一个很好的参考

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }
于 2014-11-24T11:47:08.303 回答
4

这里流行的答案有时确实有效，但有时它会创建难以处理的水平滚动条 - 特别是在处理宽水平导航和大型下拉菜单时。这是一个更轻量级的版本，有助于避免这些边缘情况：

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

证明它正在工作！

为了更具体地回答您的问题，可能无法不设置一些包含元素，但是很有可能不指定宽度值。希望可以节省一些人的头疼！

于 2014-04-15T21:49:20.090 回答
4

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

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

在 CSS 中，您可以使用以下方式对其进行样式设置：

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

这表明您的顶部和底部边距为零像素，并且在左侧或右侧，自动计算出需要多少是均匀的。

只要它存在并且不是 100%，你为宽度输入什么并不重要。否则，您将不会将中心设置在任何东西上。

但是，如果您将其向左或向右浮动，则赌注将被取消，因为这会将其从页面上的正常元素流中拉出来，并且自动边距设置将不起作用。

于 2009-08-05T09:31:43.367 回答
1

你不能只使用display: inline blockand aligntocenter吗？

例子。

于 2011-05-07T19:46:44.597 回答
0

对于 50% 元素

width: 50%;
display: block;
float: right;
margin-right: 25%;
于 2020-11-08T00:07:50.010 回答