字体真棒图标对齐
Font Awesome Icon Alignment
我试图让我的主页按钮位于 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
...
下方的图标
有什么建议吗?
您需要将 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>
这是因为您设置了行高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>
从 .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>
我试图让我的主页按钮位于 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
...
有什么建议吗?
您需要将
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>
这是因为您设置了行高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>
从 .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>