Centratura font Icone grandiose verticalmente e orizzontalmente

Question

Attualmente sto usando FontAwesome e sto avendo un momento difficile centrando le icone sia verticalmente che orizzontalmente nel loro contenitore. Ho provato a farlo tramite il posizionamento e ho riscontrato problemi in cui le dimensioni delle icone erano diverse. Fondamentalmente ho l'orizzontale e sto cercando di ottenere la verticale.

<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

questo i s tutto ciò che serve, senza involucro necessario:

.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

Così ho finalmente capito (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

Ho appena abbassato l'altezza 28px sul .login-icon [class = * 'icon-'] Ecco il violino: http://jsfiddle.net/mZHg7/

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

Answer 4

ho usato trasformare per correggere l'offset. Funziona alla grande con icone rotonde come l'anello della vita.

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

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

Answer 5

Se si utilizza Twitter Bootstrap, aggiungere il codice di classe al proprio codice.

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