html - 居中图像边缘的链接

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 fiddle : http://jsfiddle.net/SinisterSystems/3TbVv/3/

---

如果您需要将元素放置在文档结构 的范围内，您可以应用 wrapper用CSS类relative .

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 fiddle : http://jsfiddle.net/SinisterSystems/3TbVv/4/

---

扩展:它在整个页面上显示您的链接的原因是因为您使用了 display:block;并且没有 wrapper或任何形式的收容措施。 display:block;本质上是一个 100%宽度元素。

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

最简单的解决方案就是 wrapper在设置某种类型的 absolute position 时，将其放入并设置 wrapper 元素的样式用你的img .这将确保它保持在 wrapper 范围内。 , 你可以定位 wrapper因此在你的document通过正常方式，因此 relative风格。