Question

我使用font awesome在我的网站上创建图标。

问题是，有些图标比图标的实际图标内容高，所以由于额外的高度，它们不会排在基线上。

我希望图标全部在底线上对齐。就像字母底部对齐一样。为此，图标必须与内容一样高。

这是实际的：在.fa div内部之前比它应该更高。这是一个展示3种不同的.fa图标的想象。其中一个比它应该更高。

在将其从Chrome剪辑之前，我用蓝色突出显示了它的内容框。

您会注意到图标的底部有多余的空间。这是实际的：突出显示之前。

IMAGE EXAMPLE

我怎样才能摆脱这个空间，以便图标能够很好地贴上基线？

Answer 1

请参阅此codepen示例：https://codepen.io/vtsells/pen/oeJKNz

基本上我所做的是将问题图标包装在父容器中，以便我可以控制高度应该是什么。由于我可以通过这种方式控制图标的高度，因此我可以控制边界框在对齐方面的位置。在该示例中，通过柔性盒完成对齐。 display:flex; align-items:flex-end //flex-start to align to the top, center to align to the vertical center

HTML：

<div id="container">
  <i class="fa fa-trash-o fa-2x"></i>
  <i class="fa fa-clock-o fa-2x"></i>
  <div id="wrapper">
    <i class="fa fa-check-square-o fa-2x"></i>
  </div>
</div>

CSS：

#container{
   background:#888;
   display:flex;
   align-items:flex-end;
   padding:10px;
}
#wrapper{
   background:#ccc;
   overflow:hidden;
   height:29px;
   width:30px;
}
i{
   background:#ccc;
}

FontAwesome |如何使图标垂直对齐？

1 个答案: