字体真棒图标对齐

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>