Question

我正在尝试使用padding在中心放置一个可点击的图片。

问题是现在图像周围有很多不需要的可点击空间。我甚至可以点击屏幕边缘的图像，尽管图像位于屏幕中间。

如果我删除它padding它可以工作，但那时图像不是我想要的。

有没有办法解决这个问题？

我的HTML：

<body>
    <div class="page">
      <div class="body">
        <div id="clicktoenter">
          <h1><a href="home.html" class="home" title="Home Link"></a></h1>
        </div>
      </div>
    </div>
</body>

我的CSS：

.body{
    width:940px;
    margin:0 auto;
    padding:0 10px;
    overflow:hidden;
}

.home{
    margin-bottom: 10px;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
    padding:200px 200px;
}

.home:hover{
    background:url(../images/imageclick.png) center center no-repeat;
    padding:200px 200px;
}

Answer 1

将您的保证金更改为此值，它将居中，而不是使用填充。

.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}

Answer 2

你有固定的块元素宽度，所以你可以使用自动左/右边距来固定这个块：

.home{
    margin:200px auto;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
}

Answer 3

如果您确实希望可点击图像位于屏幕中间，请忘记填充，然后将图像所在的h1居中。

#clicktoenter h1 {text-align:center}

删除可点击图像周围的空间

3 个答案: