字体真棒图标对齐

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>

字体真棒图标对齐

Font Awesome Icon Alignment

html

css

font-awesome