क्षैतिज रूप से केंद्र

Question

में थंबनेल संरेखित करें कोड है जो मैं अपने एचटीएमएल में ट्विटर-बूटस्ट्रैप के साथ उपयोग कर रहा हूं। मैं आउटपुट को संरेखित करने की कोशिश कर रहा हूं लेकिन छवि को बाएं-गठबंधन किया गया है इससे कोई फर्क नहीं पड़ता कि मैं क्या करता हूं।

<ul class="thumbnails"> 
    <li class="span5"> 
    <a href="#" class="thumbnail"><img src="img.jpg" /></a> 
    </li> 
</ul> 

कोई आसान समाधान?

Answer 1

ट्विटर बूटस्ट्रैप थंबनेल डिफ़ॉल्ट रूप से छोड़ दिया करने के लिए जारी कर रहे हैं, आप उन्हें text-align:center और display:inline-block गुणों के साथ अपने कंटेनर संरेखित केंद्र बनाने के लिए अपने स्वयं के स्टाइलशीट पर उस व्यवहार को ओवरराइट करना। इस प्रयास करें:

सीएसएस

.thumbnails { 
    text-align:center; 
} 

.thumbnails > li { 
    display: inline-block; 
    *display:inline; /* ie7 fix */ 
    float: none; /* this is the part that makes it work */ 
} 

इस तरह thumbail छवियों .thumbnails कंटेनर के अंदर केंद्रित हो जाएगा। कंटेनर आप में अपनी छवियों को केंद्रित करने के लिए चाहते हैं के साथ .thumbnail वर्ग बदलें

Answer 2

यदि आप text-align: center; का उपयोग करते हैं और अपना imgdisplay: inline-block; देते हैं तो यह केंद्र गठबंधन होना चाहिए।

देखें: http://jsfiddle.net/HWMZg/

Answer 3

मैं इस बूटस्ट्रैप के लिए सबसे आसान काम करता पाया:।

.thumbnails > li { 
    float: right; 
    margin-bottom: 18px; 
    margin-left: 20px; 
} 

मैं बस से "छोड़" करने के लिए "सही"

"फ्लोट" बदला

Answer 4

छवि के लिए एक नई पंक्ति बनाएँ। उचित अपनी छवि जैसे के आकार के आधार ऑफसेट का उपयोग करें:

<div class="span8 offset2" > 

Answer 5

यह सरल अभी जोड़ने है:

<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div> 

आशा यह था उपयोगी