删除可点击图片周围的空间
[英]Remove space around clickable image
问题描述
I'm trying to place a clickable image in the center using padding . 
我正在尝试使用padding将可点击的图像放置在中心。
The problem is that there is a lot of unwanted clickable space around the image now. 问题在于，现在图像周围有很多不需要的可单击空间。 I can even click the image from the edges of my screen although the image is in the middle of the screen. 我什至可以从屏幕边缘单击图像，尽管该图像位于屏幕中间。
If I remove padding it works but then the image isn't were I want. 如果我删除padding它可以工作，但不是我想要的图像。
Is there a way to fix this? 有没有办法解决这个问题？
My HTML: 我的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>
My CSS: 我的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;
}
3 个解决方案
解决方案1
1 已采纳 2013-04-05 21:20:31
Change your margin to this and it will center, not using padding. 将您的边距更改为此，它将居中，而不使用填充。
.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
解决方案2
1 2013-04-05 21:24:49
You have fixed width of block element, so you can to use auto left/right margins to center this block: 块元素的宽度是固定的，因此可以使用自动左/右边距使该块居中：
.home{
margin:200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
解决方案3
-1 2013-04-05 21:25:23
如果您确实希望可点击的图片位于屏幕的中间，则请忽略填充并仅将图片所在的h1居中。
#clicktoenter h1 {text-align:center}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.