如何防止图片链接成为整个页面的宽度？

Question

这是我的html源代码：

<a href="#section-1">
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>

当我尝试以这种方式使用它来使宽度为196像素的图像链接到某处时，该链接将跨越整个页面宽度。 我只希望链接悬停在图像上时可用。

编辑：图像需要保持水平居中。

Answer 1

要对齐图像并获得所需的内容：

将一个类（这样你可以风格吧），取出内嵌样式的图像，并指定宽度a使用自动和左，右页边距（因为我们指定的宽度），将它对齐到中央。

HTML

<a href="#section-1" class="link">
    <img src="/images/site-images/scrolldown2.png">
</a>

CSS：

.link {
    display: block;
    width: 196px;
    margin: 0 auto;
}

Answer 2

用这个：

<a href="#section-1" style="margin: 0px auto; display: block; width: 196px">
    <img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>

或绝对位置：

<a href="#section-1" style="position: absolute; left: 50%; margin-left: -98px; display: block; width: 196px">
    <img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>

Answer 3

在您的代码中添加一个类

<a class="my_link" href="#section-1">
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>

小提琴http://jsfiddle.net/thiswolf/hMR9a/1/

这会使图像无法点击

    .my_link{
pointer-events: none;
}

这使图像可点击

    .my_link:link{
cursor:pointer !important;
pointer-events: auto;
}