css - 在 anchor 标记内居中图像，但使额外的空间不可点击？

Question

HTML:

<a href="">
  <img class="center" src="">
</a>

CSS:

.center { display: block; margin: 0 auto; }

图像居中，但问题是图像周围任何额外的 white-space 也是可点击的。有办法解决这个问题吗？

(图片大小不一)

Answer 1

您可以在其周围包裹一个 div 并将该 div 而不是图像本身居中。

<div class="center">
  <a href="">
    <img src="">
  </a>
</div>

然后为div添加样式定义。

.center { margin: 0 auto; }