水平居中使用css生成动态宽度的div

时间:2013-05-09 23:06:50

标签: html css

我已经看过一百万篇关于这个主题的博文,但我找不到针对我的具体问题的解决方案。我的设置如下:

<div id="wrapper" style="position:absolute; max-width:500px; min-width:300px; width:100%"> </div>

<div id="wrapper" style="position:absolute; max-width:500px; min-width:300px; width:100%"> </div>

如何使用CSS将包装器居中。保证金:自动无效。

3 个答案:

答案 0 :(得分:0)

它的风格是position:absolute,所以你要么必须改变这样:

style="position:absolute; max-width:500px; min-width:300px; width:100%"
/* changes to: */
style="margin: 0px auto; max-width:500px; min-width:300px; width:50%"
/* width changes so that there's actually room to center */

或者如果您想保留position:absolute,则必须使用Javascript手动设置x和y位置。

如果您的意思是想要将内容集中在其中,只需添加text-align: center;

答案 1 :(得分:0)

您是否尝试过为包装器设置宽度而不是100%,然后设置margin:auto?

答案 2 :(得分:0)

您需要使用margin: 0 auto;而不是margin: auto;。我最初犯了同样的错误。