所以我得到了这个:
<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>
我希望它在单击图像时在屏幕中间弹出。图片当前以“#”开头,因此它只是转到页面顶部。
我的问题是,当我将 addedcartbg 设置为 position:fixed 时,它完全从页面上消失了。我还需要知道如何将它在屏幕的中间垂直居中,我知道我可以将左右边距设置为自动使其水平居中,但这不适用于顶部和底部。
这是我当前的 div CSS 代码:
.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}
最佳答案
我假设这是你的灯箱类而不是像这样修改它,这应该为你完成工作
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*half of total height + half of top padding*/
margin-left: -175px; /*half of total width + half of left padding*/
}
关于css - 在屏幕中央居中弹出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13374077/