垂直和水平居中FontAwesome圖標

我目前正在使用FontAwesome，並且在居中的容器中垂直和水平放置圖標時都很困難。我已經嘗試通過定位來解決問題，並且遇到了問題bc圖標大小不同。我基本上有橫向，我正在試圖獲得垂直。垂直和水平居中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/

來源

2013-07-14 Nix

這個我一切都需要，沒有包裝需要：

.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/

來源

2013-07-14 20:19:30

你已硬編碼'線height'這不是動態的。此處不使用垂直對齊。 – Pierozi

所以最後得到的（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>

來源

2013-07-14 20:13:11 Nix

看看我的回答，我覺得你看上去不那麼集中 –

我剛降低的高度，以28px上的.login圖標[類* = 'icon-'] 這裏的小提琴：http://jsfiddle.net/mZHg7/

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

來源

2013-07-14 20:15:48 AdamSchuld

我已經使用變換來糾正偏差。它與圓環圖標一樣效果很好。

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

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

來源

2017-02-06 21:44:04

歡迎來到StackOverflow！雖然答案總是值得讚賞的，但3年前問這個問題，並且已經有了一個可以接受的解決方案。請儘量避免通過提供答案將問題提到頂端，除非問題還沒有被標記爲已解決，或者您找到了一個更好的替代方法來解決問題:) –

您的回答非常有幫助，thx – Infated

@ ObsidianAge - 如果將3行CSS換成3行不是更好的解決方案（對於我們很多人經常遇到的一個非常普遍的問題），我不知道是什麼。 – Jules

如果您正在使用twitter Bootstrap，請將類文本中心添加到您的代碼中。

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

來源

2017-07-28 14:18:58

垂直和水平居中FontAwesome圖標

回答

相關問題