Question

这是我的html源代码：

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

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

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

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;
}

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

3 个答案: