简单的CSS规则模式

我有一个简单的模态的div：简单的CSS规则模式

<div class="modal"></div> 
<div class="modal-content"></div>

然后theyr相关的CSS规则：

.modal{position:fixed;background:#444;opacity:0.5;width:100%;height:100%;left:0;right:0;bottom:0;top:0;} 
.modal-content{position:fixed;background:#fff;width:auto;height:auto;top:25%;left:25%;right:25%;}

我想那是什么.modal内容仍然始终围绕页面上最大宽度500px;而宽度：自动;

有没有可能不使用JS？

来源

2011-08-23 sbaaaang

如何添加

max-width:500px; 
margin:0 auto 0 auto;

到.modal内容

希望这就是你要找的人，欢呼声。

来源

2011-08-23 22:04:03

我添加了，但它的结果不在页面上：P – sbaaaang

嗨，也尝试添加页边距：0 auto 0 auto 0;对此。现在正常工作在我身边。 –

nope ...我在FF6上.. .modal-content {position：fixed; background：#fff; margin：0 auto 0 auto 0; width：900px; right：0; left：0; height：auto ; top：25％;}它不起作用（不居中） – sbaaaang

这有点棘手，但可以实现。看看这里的一些例子： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

虽然使用Javascript和jQuery更容易，尤其是如果您的容器可以有一个固定的位置。你需要支持哪些浏览器？

来源

2011-08-23 21:44:44

所有浏览器：D – sbaaaang

呵呵，好的。无论如何，我真的推荐你用Javascript来做，因为它会为你节省很多头痛和时间。如果您担心少数用户不能够/不想运行Javascript，那么您可以使用纯CSS进行简单回退，但不会以相同方式居中。 –

好的.. :)和js（我使用jQuery）如果我想添加到.modal-content位置页面中心：fixed;和max-width：500px; ？：P – sbaaaang

简单的CSS规则模式

回答

相关问题