फ़ॉन्टिंग विस्मयकारी आइकन लंबवत और क्षैतिज

Question

मैं वर्तमान में FontAwesome का उपयोग कर रहा हूं, और मेरे कंटेनर में लंबवत और क्षैतिज दोनों आइकन को केंद्रित करने में वास्तव में कठिन समय है। मैंने इसे पोजीशनिंग के माध्यम से करने की कोशिश की है और आईसी के आकार अलग-अलग मुद्दों में भाग गए हैं। मैं मूल रूप से क्षैतिज है, और लंबवत पाने की कोशिश कर रहा हूँ।

<div class='container'> 
    <div class='row'> 
     <div class='offset2 span6 loginContainer'> 
      <div class='row'> 
       <div class='login-icon'>  
        <i class='icon-user'></i> 
       </div> 
       <input type="text" placeholder="Email" /> 

      </div> 
      <div class='row'> 
       <div class='login-icon'><i class=" icon-lock "></i></div> 
       <input type="password" class="" placeholder="Password" /> 
      </div> 
     </div> 
    </div> 
</div> 

.login-icon{ 
    font-size: 40px; 
    line-height: 40px; 
    background-color:black; 
    color:white; 
    width: 50px; 
    height: 50px; 

} 
.login-icon [class*='icon-']{ 
    height: 50px; 
    width: 50px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: baseline; 
} 

http://jsfiddle.net/ncapito/e2UPC/

Answer 1

यह मैं: यहाँ बेला है रों आप सभी की जरूरत है, कोई आवरण की जरूरत:

.login-icon{ 
    display:inline-block; 
    font-size: 40px; 
    line-height: 50px; 
    background-color:black; 
    color:white; 
    width: 50px; 
    height: 50px; 
    text-align: center; 
    vertical-align: bottom; 
} 

http://jsfiddle.net/e2UPC/6/

Answer 2

तो मैं अंत में यह मिल गया (http://jsfiddle.net/ncapito/eYtU5/):

.centerWrapper:before { 
    content:''; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 

.center { 
    display:inline-block; 
    vertical-align: middle; 
} 

<div class='row'> 
    <div class='login-icon'> 
     <div class='centerWrapper'> 
      <div class='center'> <i class='icon-user'></i></div> 
     </div> 
    </div> 
    <input type="text" placeholder="Email" /> 
</div> 

Answer 3

मैं सिर्फ ऊंचाई .login-चिह्न [वर्ग * = 'आइकन'] पर 28px तक कम http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{ 
    height: 28px; 
    width: 50px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: baseline; 
} 

Answer 4

मैं का इस्तेमाल किया है सही करने के लिए ऑफसेट को बदलने। यह जीवन की अंगूठी जैसे गोल प्रतीक के साथ बढ़िया काम करता है।

<span class="fa fa-life-ring"></span> 

.fa { 
    transform: translateY(-4%); 
} 

Answer 5

यदि आप ट्विटर बूटस्ट्रैप का उपयोग कर रहे हैं तो अपने कोड में कक्षा टेक्स्ट-सेंटर जोड़ें।

<div class='login-icon'><i class="icon-lock text-center"></i></div>