链接在居中图像的边缘

Question

我的图片也是使用

的链接

<a href="link.html"><img src="img.png" id="cloud"></img></a>

我使用

将其集中（并调整大小）

 #cloud
{
display: block;
margin-left:auto;
margin-right:auto;
height:45%;
}

问题是，链接的可点击区域扩展到整个网页，而不是仅在整个图像上。我该如何解决这个问题？

Answer 1

您可以随时使用absolute positioning。

<强> HTML：

<a href="link.html" >
    <img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>

<强> CSS：

#centerimage {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    margin: auto;
}

• JS小提琴： http://jsfiddle.net/SinisterSystems/3TbVv/3/

---

如果您需要将元素放在文档结构的范围内，则可以应用wrapper CSS类relative。< / p>

<强> HTML

<div class="wrapper">
    <a href="link.html" >
        <img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
    </a>
</div>

<强> CSS

.wrapper {
    position:relative;
    margin-top:25px;
}
#centerimage {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    margin: auto;
}

• JS小提琴： http://jsfiddle.net/SinisterSystems/3TbVv/4/

---

扩展：它在整个网页上显示您的链接的原因是因为您使用的是display:block;而且没有wrapper或任何类型的遏制。 display:block;本身就是100%宽度元素。

此外，display:inline;也不起作用，因为它可以解决问题，但只需将其调整到屏幕的左边缘即可。如果它没有100%宽度，则无法设置margins。

最简单的解决方案是将wrapper放入其中，并设置包装元素，同时使用absolute position设置某种img。这将确保它保持在wrapper范围内，您可以通过正常方式将wrapper相应地放置在document中，从而relative样式。

Answer 2

不确定这是否有效，但尝试

<img src="img.png" id="centerimage" href = "link.html"/>

如果这不起作用，请尝试使用javascript或jquery

<img src="img.png" id="centerimage" onClick = "click" href = "link.html"/>

<script>

function click() {
window.location.href = "link.html";
}

</script>

然后将其添加到css

cursor: pointer;