我已经拥有的:
.modal-m1
{
background-image: url(../images/bg-greyout.png);
background-repeat: repeat;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
margin: 0;
padding: 0;
z-index: 1;
}
.modal-m1 .modal-m2
{
display: table-cell;
vertical-align: middle;
}
.dialogbox
{
margin: 0 auto;
background-color: #F6F6F6;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 3px 3px 5px;
-moz-box-shadow: #666 3px 3px 5px;
box-shadow: #666 3px 3px 20px;
padding: 20px;
}
.mydialogbox
{
width: 400px;
}
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox mydialogbox">
... CONTENT IS HERE ......
</div>
</div>
</div>
在那个舞台上一切都很好。您可以在代码段上对其进行测试。
现在我想把几个对话框放到不同的页面上。我正在尝试重用代码,因此我正在尝试将 modal-m1
、modal-m2
和 dialogbox
提取到 ASP .NET 用户控件。 mydialogbox
必须成为 dialogbox
内的嵌套 div
。但是 dialogbox
在这种情况下会忽略 width: 400px
。有什么解决方法吗?
换句话说,我希望我的标记是:
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox">
<div class="mydialogbox">
... CONTENT IS HERE ......
</div>
</div>
</div>
</div>
这可能吗?
最佳答案
如果我不明白.. 你的 html 可以是这样的:
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox ">
<div class="mydialogbox">
<div>CONTENT IS HERE ......</div>
</div>
</div>
</div>
</div>
你只想为 .mydialogbox 设置宽度
.modal-m1 .modal-m2
{
display: table-cell;
vertical-align: middle;
text-align:center; /*add*/
}
.dialogbox
{
margin: 0 auto;
background-color: #F6F6F6;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 3px 3px 5px;
-moz-box-shadow: #666 3px 3px 5px;
box-shadow: #666 3px 3px 20px;
padding: 20px;
display:inline-block; /*change*/
}
.mydialogbox
{
width: 400px;
text-align:left
}
这是?
关于html - 在屏幕上静态居中 div(无 JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27390730/