बूटस्ट्रैप 3: छवि

Question

मैं बूटस्ट्रैप उपयोग कर रहा हूँ 3 थंबनेल के रूप में इस पर पाठ ओवरले:

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

मैं caption छवि पर ओवरले करना चाहते लेकिन जिस तरह से Mashable.com

पर किया जा रहा मैं निम्नलिखित की कोशिश की है लेकिन कोई भाग्य: ((

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

कैसे मैं छवि के शीर्ष पर है, लेकिन बस Mashable.com की तरह एक caption div ओवरले कर सकते हैं

01?

यह काम करता है लेकिन मैं इसे मैशबल की तरह केंद्रित करना चाहता हूं। और हर छवि के लिए केंद्रित है। कुछ छवियों के लिए, यह केंद्रित नहीं है।

Answer 1

आपको थंबनेल क्लास को बाद में पोस्ट-सामग्री को पूर्ण करने के लिए सेट करने की आवश्यकता है।

चेक इस fiddle

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

.thumbnail{ 
    position:relative; 

} 

यह शीर्ष देते और 0 यह ऊपरी बाएँ कोने में दिखाई देगा छोड़ दिया है।

Answer 2

स्थिति को पूर्ण पर सेट करें; सही स्थिति

सीएसएस

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

Bootply

Answer 3

में शीर्षक क्षेत्र स्थानांतरित करने के लिए यह आप के बाद क्या कर रहे है?

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

मैं कहा: text-align:center div और छवि

Answer 4

निम्न उदाहरण की कोशिश करना। छवि पर पाठ के साथ छवि ओवरले। 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; 
}