1

我正在尝试使用在中心放置一个可点击的图像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;
}
4

3 回答 3

1

将您的边距更改为此，它将居中，不使用填充。

.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
于 2013-04-05T21:20:31.520 回答
1

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

.home{
    margin:200px auto;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
}
于 2013-04-05T21:24:49.677 回答
-1

如果您真的希望可点击的图像位于屏幕中间，那么请忘记填充并将图像所在的 h1 居中。

#clicktoenter h1 {text-align:center}
于 2013-04-05T21:25:23.837 回答