Căn giữa các biểu tượng FontAwesome theo chiều dọc và chiều ngang

Question

Tôi hiện đang sử dụng FontAwesome và có thời gian thực sự khó khăn trong việc căn giữa các biểu tượng theo chiều dọc và chiều ngang trong vùng chứa của chúng. Tôi đã thử làm điều đó thông qua định vị và chạy vào các vấn đề bc kích thước biểu tượng khác nhau. Tôi về cơ bản có ngang, và đang cố gắng để có được theo chiều dọc.

<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

Điều này i s tất cả các bạn cần, không wrapper cần thiết:

.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

Vì vậy, cuối cùng tôi đã nhận nó (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

Tôi chỉ giảm chiều cao 28px trên .login-icon [lớp * = 'icon-'] Đây là fiddle: http://jsfiddle.net/mZHg7/

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

Answer 4

Tôi đã sử dụng chuyển đổi để khắc phục bù đắp. Nó hoạt động rất tốt với các biểu tượng tròn như vòng đời.

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

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

Answer 5

Nếu bạn đang sử dụng twitter Bootstrap thêm lớp văn bản vào giữa mã của bạn.

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