字体很棒的图标对齐
字体很棒的图标对齐
提问于 2016-05-09 10:06:46
我正在尝试将我的home按钮放在div中的标题中，但它是在div/header下对齐的。
我有这样的代码：
.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下面.
有什么建议吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-05-09 10:11:26
- 如果您希望
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>
Stack Overflow用户
发布于 2016-05-09 10:12:30
这是因为你设定了你的线高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>
Stack Overflow用户
发布于 2016-05-09 10:12:41
从line-height中删除.home-button并将其添加到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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37112985
复制相关文章
相似问题
腾讯云开发者
