बटन में पाठ के साथ बूटस्ट्रैप आइकन को संरेखित कैसे करें?

Question

बूटस्ट्रैप आइकन और छवि को नीचे कैसे संरेखित करें? (मैं आइकन के लिए फ़ॉन्ट-awsome का उपयोग कर रहा हूँ)।

JSBIN: http://jsbin.com/uwupuz/2/edit

<div class="btn-group"> 
    <a class="btn" href="#"> 
     <i class="icon-plus"></i> 
     <span>Add</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-trash"></i> 
     <span>Remove</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-edit"></i> 
     <span>Edit</span> 
    </a> 
    </div> 

Answer 1

इस प्रयास करें: http://jsfiddle.net/jonschlinkert/CBss2/1/ यह है कि क्या यह लागू करने line-height: 1;

के बाद मैं position संपत्ति के साथ गड़बड़ नहीं के रूप में @hajpoj ने सुझाव दिया होगा की तरह लग रहा है समस्या को ठीक करने के लिए क्लीनर तरीके हैं जिनके बाद बाद में कैस्केडिंग प्रभाव नहीं होंगे। position: relative का उपयोग करने वाली दूसरी समस्या यह है कि प्रत्येक आइकन वास्तव में आकार में थोड़ा अलग होता है। आप इसके लिए लेखांकन द्वारा रखरखाव को कम रखने की कोशिश करना चाहते हैं। इसे बनाने के लिए सबसे अच्छा है जैसा कि यह सबसे सामान्य आकार के आइकन के लिए नीचे गठबंधन है, और जब एक औसत से अधिक औसत आइकन का उपयोग किया जाता है तो यह पाठ के साथ ठीक से केंद्रित होता है। position: relative का उपयोग करना एक बड़ा आइकन दूसरों के ऊपर धक्का देगा और ऑफ-सेंटर देखेंगे।

Answer 2

आप सापेक्ष स्थिति का उपयोग कर सकते हैं।

i { 
    position: relative; 
    bottom: 1px; // or however much you want to offset it by 
} 

http://jsfiddle.net/hajpoj/ZdPGe/