在锚标签内居中图像，但是让额外的空间不可点击？

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

Answer 2

我看到的唯一选项是将锚点放在div中（不可重置，具有当前锚点的大小和样式），并根据图像调整锚点的大小：

HTML：

<div class="container">
    <a href="" class="anchor">
        <img src="http://placehold.it/350x150" />
    </a>
</div>

CSS：

.container {
    width: 100%;
    text-align:center;
}

的jsfiddle： http://jsfiddle.net/Atumra/0jncgxkb/

Answer 3

这样做怎么样

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