css - 仅使居中图像可点击

Question

所以我在一个链接中得到了这张图片，我设法将图片居中，但问题是链接占据了整个容器，在图片的左右两侧你可以点击，这不是我想要的!我只希望图片可以点击。

我卡在这上面了，请帮忙。

https://jsfiddle.net/2ycyzmw5/

.salo img {
  display: block;
  margin: auto;
}

<a href="#" class="salo">
  <img src="http://dummyimage.com/200x200/000/fff">
</a>

Answer 1

就这样做，不需要额外的包装。

.salo {
  display: block;
  margin: auto;
  width: 200px;
}

<a href="#" class="salo">
    <img src="http://dummyimage.com/200x200/000/fff">
</a>