字體真棒圖標對齊

我試圖讓我的主頁按鈕在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下面的圖標顯示...

有什麼建議？

來源

2016-05-09 marianna013

你可以讓你的錯誤jsFiddle，所以我們可以看到它嗎？ –

請提供小提琴或至少一個截圖 –

你需要改變你的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>

來源

2016-05-09 10:11:26 dippas

完美，謝謝！ – marianna013

不客氣@ marianna013';）' – dippas

這是因爲你已經設置了行高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>

來源

2016-05-09 10:12:30 Justinas

設定高度從.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>

來源

2016-05-09 10:12:41

字體真棒圖標對齊

回答

相關問題