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

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

编辑:我已经有这个工作使用包含div的浮动元素和指定容器的width (然后使用margin: 0 auto;容器)。 我只想知道是否可以在不使用包含元素的情况下完成,或者至less不必为包含元素指定width

假设被浮动的元素将被置于一个id="content"div

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

这是一个很好的参考 。

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

您可以使用fit-content值的width

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

注意:它只适用于最新的浏览器。

这里stream行的答案有时会起作用,但有时会创build水平滚动条,这些滚动条很难处理,特别是在处理宽水平导航和大型下拉菜单时。 这是一个更轻的版本,可以帮助避免这些边缘情况:

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

certificate它正在工作!

为了更具体地回答你的问题,可能不能设置一些包含元素,但是很可能没有指定宽度值。 希望能够拯救出一些令人头疼的人!

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

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

在CSS中,你可以用下面的样式来设置它:

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

其中指出,您有一个零像素的顶部和底部边缘,并在左侧或右侧,自动计算需要多less是平衡的。

只要它在那里,并不是100%,那么宽度是什么都没有关系。 否则,你不会设置任何东西的中心。

但是,如果您向左或向右浮动,则投注将被closures,因为这会将其从页面上正常的元素stream中拉出,而自动边距设置将不起作用。

你不能只使用display: inline blockcenter

例子 。

当id = container(这是外部div)和id = contained(这是内部div)时,这会更好。 下面强烈推荐的解决scheme的问题是,当浏览器尝试迎合左侧的-50%属性时,会导致某些情况下会出现水平滚动条。 这个解决scheme有一个很好的参考

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