2012-02-16 6 views
5

साथ मैं बूटस्ट्रैप सीएसएस ढांचे के इनलाइन लेबल का उपयोग करना चाहते हैं:खड़ी केंद्र अवधि (बूटस्ट्रैप लेबल) एक साथ अन्य तत्वों

<span class="label">Default</span> 

दुर्भाग्य से इन लेबलों खड़ी जब अन्य तत्वों के साथ एक साथ इस्तेमाल किया केंद्रित नहीं कर रहे हैं। http://jsfiddle.net/kvPpm/

मैं line-height और निरपेक्ष/सापेक्ष स्थिति समाधान के बारे में पता कर रहा हूँ, लेकिन उन्हें सही ढंग से लागू करने के लिए सक्षम नहीं था:

<p> 
    <span class="label"><a href="#">test</a></span>This is a test heading. 
</p> 

कृपया एक दृश्य उदाहरण के लिए पूर्ण कोड देखें।

मैं कैसे खड़ी इन लेबलों केंद्रित कर सकता है?

उत्तर

6

<span> के बाद डिफ़ॉल्ट रूप से एक inline तत्व है तुम सिर्फ कर सकते हैं:

span { vertical-align: middle|top|bottom; } 

और यह काम करना चाहिए। http://jsfiddle.net/kvPpm/1/

लेकिन <span> के अंदर अर्थात् सही नहीं है। आप बस <a> का उपयोग कर सकते हैं और इसे display: inline पर स्टाइल कर सकते हैं।

http://jsfiddle.net/kvPpm/3/

2
.label { vertical-align: top; } 

यह मेरे लिए काम किया जब मैं यह एक उल में ठीक से गठबंधन किया जाना चाहता था