Question

See

HTML：

<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
    <img class="img-responsive center-block" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>

<a>标记似乎延伸到<img>的边距，但我无法缩小边距或图像将不再居中。

感谢您提供任何帮助！

Answer 1

为什么你不使用div来包装和暂停你的图像？

查看我的代码

HTML

<div class="text-center">
  <a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
    <img src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
  </a>
</div>

CSS

img{
  display: inline-block
}

编辑：

Codepen：http://codepen.io/anon/pen/grxjmK

Answer 2

Bootstrap的CSS将center-block和img-responsive设置为display: block

块级元素变为<div>，如果未指定宽度或最大宽度，则会占用其容器的整个宽度。锚点包裹在整个图像块周围，包括空白区域。

您可以轻松覆盖display: block并将图像居中对齐，就像它是文本一样：

<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
    <img class="img-responsive center-block" style="display: inline-block !important;" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>

但是如果不知道布局的背景，我就不能说是否有更好的解决方案。

<a href="https://i.stack.imgur.com/PU9sC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PU9sC.png" alt="enter image description here"/></a> <P> <a> clickable area too large around image with img-responsive, center-block

2 个答案: