Question

我知道有很多关于此的帖子，但无论我尝试什么都不起作用。我尝试过文字对齐，不同的布局等等，我不知道如何解决这个问题。

以下是代码：

＆＃13;

.down{
    display:inline-block;
    font-size: 40px;
    color:white;
    width: 50px;
    height: 50px;
}

.center{
    text-align:center;
}

＆＃13;

<div style="text-align: center" class="small-4 medium-4 large-4 columns">
    <i  class="fa fa-angle-double-down hvr-hang down"></i>
</div>

＆＃13;

Answer 1

如果你想垂直居中图标，那么你应该给它的行高等于元素的高度

将此添加到您的 .down css类line-height: 50px!important;

.down{


color:black;
width: 50px;
height: 50px;
line-height: 50px!important;

/*for demo purpose*/
border:1px solid black;
}


.center{
  text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div style="text-align: center" class="small-4 medium-4 large-4 columns">
    <i  class="fa fa-angle-double-down hvr-hang down"></i>
</div>

Answer 2

您可能需要考虑使用flexbox轻松水平和垂直对齐。

＆＃13;

if(PAGEY + 15 + box.outerHeight() > windowHeight)

＆＃13;

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: lightblue; /* for visibility purpose only */
}

＆＃13;

对齐字体真棒图标

2 个答案: