1

我正在尝试修复一个页面按钮。我不是专业人士，但在这里；

body {
    width:100%;
    height:100%;
    background:#181516;
    overflow:hidden;
    position:absolute;
}

.bg {    
    background:url(../images/entrance.jpg) no-repeat center center ; 
    height:100%;
    z-index:1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

还有按钮；

.door {
    display:inline-block;
    width:170px;
    margin-top:22%;
}

但是在更小或更大的屏幕上，按钮可以随心所欲：D

它必须固定成一个正方形。后面的图片是一个小门。并且按钮必须在那扇门内...... MArgin 或 padding px 或 % 总是相同的。你能帮助我吗？

4

1 回答 1

0

如果我理解正确，即您希望拥有一个始终位于屏幕中央的 div。

基本上我这样做的方法是将其绝对定位，并且距离屏幕的顶部和左侧 50%。然后 div 的左上角在中心，为了解决这个问题，我使用 div 大小的一半作为负边距来定位将其移回中心。

所以基本上如下：

.door{ 位置：绝对；
最高：50%；
左：50%；
宽度：170px；
高度：200px；
左边距：-85px；
边距顶部：-100px；
背景颜色：#fff;
}

于 2012-12-17T12:44:12.320 回答