字体真棒图标对齐

我试图让我的主页按钮在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

字体真棒图标对齐

回答

相关问题