2013-11-21 10 views
6

मैं कैसे खड़ी इस संदर्भ में glyphicon (और badge) तत्वों केंद्रित कर सकता है:खड़ी एक Glyphicon केंद्रित

<ul class="list-group"> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="glyphicon glyphicon-chevron-right pull-right"/> 
    </li> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="badge">123</span> 
    </li> 
</ul> 

बहु लाइन सामग्री से मेरा लाइनों की एक अलग संख्या और कुछ मामलों में पाठ लपेटकर मतलब है और एक फ़ॉन्ट आकार की विविधता।

यह मोबाइल ऐप के लिए नेविगेशन पेज प्रदान करना है जिसमें दाईं ओर एक तीर का दृश्य संकेत शामिल है। जब सामग्री लपेटती है या अन्य मल्टी-लाइन तत्व लंबवत केंद्रित होते हैं तो अन्य ढांचे प्रदान करते हैं लेकिन वे आम तौर पर पृष्ठभूमि छवियों का उपयोग करते हैं। मैं बूटस्ट्रैप 3.0.0 का उपयोग कर रहा हूँ।

उत्तर

4

कैसे इस बारे में ..

.list-group-item span { 
margin-top: -0.5em; 
} 

डेमो: http://bootply.com/95790

+0

मैं स्पष्ट किया जाना चाहिए था। बहु-पंक्ति से मेरा मतलब है कि अज्ञात संख्याओं की रेखाएं और विभिन्न फ़ॉन्ट आकार इसलिए निश्चित ऑफसेट इसे नहीं करेंगे। मैं सवाल सुधारूंगा। –

+0

मैंने इसे स्पैन क्लास में अभी जोड़ा - खूबसूरती से काम किया! –

2
<div class="list-group"> 
    <div class="list-group-item"> 
    <div class="media-body"> 
     Multi-line content... 
    </div> 
    <div class="media-right" style="vertical-align:middle;"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </div> 
    </div> 
</div> 
+2

आपको समझाया जाना चाहिए कि यह सवाल पूछने का समाधान क्यों है। –

संबंधित मुद्दे