簡單的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規則模式

回答

相關問題