图像作为链接 HTML

Question

我正在建立一个简单的网站来对我的 DIY 项目进行分类。我有一个徽标，我想单独坐在首页上。单击此图像会将您链接到主屏幕。我的链接工作正常，并且图像在封面上很好地居中（大约 800 像素宽）。我面临的问题是链接的可点击区域似乎超出了我的主屏幕的左右边缘。

目前图片的代码如下：

img.cent_img
{
    margin: 0 auto;
    display: block;
    border: solid 3px #9966bb;
}
img.cent_img:hover
{
    margin: 0 auto;
    display: block;
    border: solid 3px #997777;
}
<a href="home.html"><img src="../images/logo.png" class="cent_img" alt="XXX"
TITLE="YYY" width="800" height="330"/></a>

有谁知道为什么链接在图片边缘之外是可点击的？

注意它只能向左/向右点击。在图像上方和下方，它按预期运行。

Answer 1

这是因为您将图像居中，而不是链接。图像在<a> 标签内的左侧和右侧创建边距，使该区域可点击。

将您的代码放入<div>，然后将<div>居中。

示例： http://jsfiddle.net/eW9V9/

#logo {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

#logo img
{
    border: solid 3px #9966bb;
}
#logo img:hover
{
    border: solid 3px #997777;
}

<div id="logo">
    <a href="home.html">
        <img src="http://www.google.com/images/srpr/logo11w.png" class="cent_img"         alt="XXX"
TITLE="YYY" width="200" height="100"/>
    </a>
</div>