Wal*_*ssa 56 css positioning css-float centering variable-width
如何水平居中可变宽度的浮动元素？
编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .
Ley*_*eyu 89
假设浮动并将居中的元素是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%;
}
这是一个很好的参考.
小智 67
.center {
display: table;
margin: auto;
}
您可以将fit-contentvalue 用于width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
注意：它仅适用于最新的浏览器。
当id =容器（外部div）和id =包含（内部div）时，这种方法效果更好。强烈建议使用的解决方案的问题是，在某些情况下，当浏览器尝试满足左侧条件时，它会导致水平滚动条：-50％属性。此解决方案 有很好的参考
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
假设您有一个DIV想要水平居中的：
<div id="foo">Lorem ipsum</div>
在 CSS 中你可以这样设置它的样式：
#foo
{
margin:0 auto;
width:30%;
}
其中指出您的顶部和底部边距为零像素，并且在左侧或右侧，自动计算出需要多少像素才能保持均匀。
只要宽度存在且不是 100%，输入什么内容并不重要。否则你就不会以任何东西为中心。
但是，如果您将其向左或向右浮动，那么就没有办法了，因为这会将其从页面上的正常元素流中拉出来，并且自动边距设置将不起作用。