<a> Görüntüye çok yakın görüntülenebilir alan img duyarlı, orta bloklu

Question

Bkz. http://codepen.io/robbielaldrich/pen/ZWJyjO?editors=1100.

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> etiketi <img> marjı uzanan gibi görünüyor, ama ben marjı azaltamaz veya görüntü artık ortalanır.

Verebileceğiniz herhangi bir yardım için teşekkürler!

Answer 1

Bootstrap Var CSS display: block

bir blok düzeyi elemanı <div> gibi olur ve bir genişlik ve maksimum genişlik belirtilmemişse kabı tüm genişliği kadar sürer setler center-block ve img-responsive hem de. Anchor, boş alan da dahil olmak üzere tüm görüntü bloğunun etrafına sarılır.

Yeterince display: block kolay geçersiz olabilir ve metin sanki görüntüyü merkez align:

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

Ama daha iyi bir çözüm olup olmadığını söyleyemeyiz düzen bağlamını bilmeden

.

Answer 2

Görüntünüzü neden sarmak ve halisizleştirmek için bir div kullanmıyorsunuz?

kodum

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 bkz

img{ 
    display: inline-block 
} 

DÜZENLEME:

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