Bootstrap 3: nakładka Tekst na obrazie

Question

Używam Bootstrap 3 miniaturę następująco:

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

chcę caption nakładki na obrazie, ale sposób, w jaki robi na Mashable.com

Próbowałem następujących ale bez powodzenia: ((

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

Jak mogę nakładki caption div na górze obrazu, ale podobnie jak Mashable.com

01?

To działa, ale chcę, aby był wyśrodkowany tak jak zszywany. i wyśrodkowany dla każdego obrazu. w przypadku niektórych zdjęć nie jest wyśrodkowany.

Answer 1

Musisz ustawić klasę miniaturek na pozycję względną, a post-content na absolute.

Sprawdź to fiddle

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

.thumbnail{ 
    position:relative; 

} 

Daje to top i left 0 sprawi, że pojawi się w lewym górnym rogu.

Answer 2

Ustaw pozycję na bezwzględną; aby przesunąć obszar napisów w prawidłowym położeniu

CSS

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

Bootply

Answer 3

Czy to Ty jesteś po?

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

I dodaje: text-align:center do div i obrazu

Answer 4

spróbować następujący przykład. Nakładka obrazu z tekstem na obrazie. 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> 

css

.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; 
}