Question

我正在尝试修复页面按钮。我不是亲，但在这里;

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;
}

和butttons;

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

但是在更小或更大的屏幕上，按钮可以随时随地移动：D

必须固定在一个正方形中。背面图片是一扇小门。并且按钮必须位于该门内... MArgin或padding px或％始终相同。你能救我吗？

Answer 1

如果我理解正确，即你想要一个总是停留在屏幕中心的div。

基本上我这样做的方法是将它从屏幕的顶侧和左侧定位为绝对值和50％。然后div的左上角位于中心，以确定我使用div的一半大小作为负边距将其移回中心位置。

所以基本上如下：

。门{       位置：绝对;
      顶部：50％;
      左：50％;
      宽度：170像素;
      高度：200像素;
      保证金左：-85px;
      边距：-100px;
      背景色：#FFF;
      }

如何集中和固定位置？

1 个答案: