html - 居中 "go to top"图片链接，但链接应用到图片高度的 100% 宽度

Question

<a href="#body1"> <img  class="hdp" src="hdp.jpg" alt=""  title="top"/></a>

那是 html，并且...

img.hdp{display:block;margin: 0 auto;border:none;padding:0;}

这就是 css。

好吧，图像将它链接到顶部，问题是图像左侧和右侧的整条宽度也确实链接了它。我尝试了多种解决方案，但似乎都没有用。 欢迎任何有想法的人提出。

Answer 1

如何将类移动到 anchor ，并给它固定:

<a class="hdp" href="#body1"> <img  class="hdp" src="http://placehold.it/120x120" alt=""  title="top"/></a>

CSS:

a.hdp{ display:block;margin: 0 auto;border:none;padding:0; width: 120px;}

这假设您事先知道图像的宽度。

jsfiddle:http://jsfiddle.net/7pNMQ/1/