字體真棒圖標對齊

Question

我試圖在div中的標題中獲取我的主頁按鈕，但它正在div /標題下對齊。

我有這個代碼：

 .home-button { background: #333; width: 59px; height: 60px; float: right; line-height: 180px; text-align: center; vertical-align: bottom; } div.home-button i.fa { display: inline-block; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> <div class="home-button"> <i class="fa fa-home" aria-hidden="true"></i> </div> 

但它顯示在div下面的圖標...

有什么建議？

Answer 1

• 如果想要垂直對齊，你需要將line-height改為60px （相同的值有你的height ）

• 不需要為i設置其他規則，因為font-awesome.css已經處理過了

 .home-button { background: #333; width: 59px; height: 60px; line-height:60px; float:right; text-align: center; vertical-align: bottom; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> <div class="home-button"> <i class="fa fa-home" aria-hidden="true"></i> </div> 

Answer 2

這是因為您已將行高設置為180px 。 文本與此值垂直對齊，而不是設置高度為60px

 .home-button { margin-top: 50px; background: #333; width: 59px; height: 60px; float: right; line-height: 60px; text-align: center; vertical-align: bottom; } div.home-button i.fa { color: #ddd; display: inline-block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/> <div class="home-button"> <i class="fa fa-home" aria-hidden="true"></i> </div> 

Answer 3

從.home-button刪除line-height並將其添加到i標記，如下所示：

 .home-button { background: #333; width: 59px; height: 60px; float: right; text-align: center; } .home-button i { display: inline-block; line-height: 60px; color: #fff; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> <div class="home-button"> <i class="fa fa-home" aria-hidden="true"></i> </div>