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

从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>

字体真棒图标对齐

3 个答案: