Bootstrap 3: Görüntünün

Question

şöyle ben Bootstrap 3 küçük resim kullanıyorum

Metin bindirme:

 <div class="thumbnail"> 
      <img src="/img/robot.jpg" alt="..." /> 
      <div class="caption post-content"> 

       <h3>Robots!</h3> 
       <p>Lorem ipsum dolor sit amet</p> 

      </div> 
     </div> 

Ben caption resmin üzerine bindirmek istiyorum ama yolu Mashable.com

üzerine yapılıyor Aşağıdaki denedi ama şans yok: ((

.post-content { 
    background: none repeat scroll 0 0 #FFFFFF; 
    opacity: 0.5; 
    margin: -54px 20px 12px; 
    position: relative; 
} 

Nasıl görüntünün üstünde ama sadece Mashable.com gibi bir caption div kaplamasını sağlayabilirsiniz

01?

Bu işe yarıyor, ancak aynen maskelendiği gibi ortalanmasını istiyorum. ve her görüntü için ortalanmış. Bazı görüntüler için, ortalanmış değildir.

Answer 1

Küçük resim sınıfını göreceli olarak sonradan içerik sonrası mutlak olarak konumlandırmanız gerekir.

üst verilmesi

Kontrol bu fiddle

.post-content { 
    top:0; 
    left:0; 
    position: absolute; 
} 

.thumbnail{ 
    position:relative; 

} 

ve 0 o sol üst köşede görünür hale getirecek bıraktı.

Answer 2

Konumu mutlak olarak ayarlayın; doğru konuma

CSS

.post-content { 
    background: none repeat scroll 0 0 #FFFFFF; 
    opacity: 0.5; 
    margin: -54px 20px 12px; 
    position: absolute; 
} 

Bootply

Answer 3

altyazı alanı bu ne sonra mı taşımak için?

http://jsfiddle.net/dCNXU/1/

ekledim: text-align:center

Answer 4

aşağıdaki örneği deneyin div ve görüntüye. Görüntüdeki metinle görüntü bindirme. demo

<div class="thumbnail"> 
    <img src="https://s3.amazonaws.com/discount_now_staging/uploads/ed964a11-e089-4c61-b927-9623a3fe9dcb/direct_uploader_2F50cc1daf-465f-48f0-8417-b04ac68a999d_2FN_19_jewelry.jpg" alt="..." /> 
    <div class="caption post-content"> 
    </div> 
    <div class="details"> 
    <h3>Robots!</h3> 
    <p>Lorem ipsum dolor sit amet</p> 
    </div> 
</div> 

.post-content { 
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; 
    opacity: 0.5; 
    top:0; 
    left:0; 
    min-width: 500px; 
    min-height: 500px; 
    position: absolute; 
    color: #ffffff; 
} 

.thumbnail{ 
    position:relative; 

} 
.details { 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    color: #ffffff; 
}