Centrowanie czcionekAutoryzowane ikony w pionie i poziomie

Question

Obecnie używam FontAwesome i mam problem z centrowaniem ikon w pionie i poziomie w kontenerze. Próbowałem to zrobić poprzez pozycjonowanie i napotkałem problemy bc rozmiary ikon były różne. Zasadniczo mam poziomy i próbuję uzyskać pion.

<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

To ja wszystko, czego potrzebujesz, nie otoki potrzebne:

.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

Więc w końcu go (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

Właśnie obniżono wysokość do 28px na .login-ikona [Klasa * = 'icon-'] Oto skrzypce: http://jsfiddle.net/mZHg7/

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

Answer 4

Użyłem przekształcić skorygować offset. Działa doskonale z okrągłymi ikonami, takimi jak pierścień życia.

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

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

Answer 5

Jeśli korzystasz z Twittera Bootstrap dodaj klasę text-center do swojego kodu.

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