垂直居中的字体真棒图标旁边较大的

Question

所以我已经阅读了几十个相关的问题，尝试使用所有解决方案，但似乎没有任何工作。我错过了什么吗？这是截图： 问题是这些箭头不在更大的图标中间。

CSS：

    span.fa {
  font-size: 50px;
}
i.fa {
  font-size: 120px;
  text-align: center !important;
  text-decoration: none !important;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
}
i.fa-map-signs {
  background: #f6f6f6;
  color: #00b6ff;
}
i.fa-pencil {
  background: #f6f6f6;
  color: #00b6ff;
}
i.fa-credit-card {
  background: #f6f6f6;
  color: #00b6ff;
}
i.fa-hand-peace-o {
  background: #f6f6f6;
  color: #00b6ff;
}

HTML：

<div class="container-fluid bg-grey text-center">
  <h2 style="margin-bottom: 100px;">Kaip tai veikia?</h2>
  <div class="row slideanim">
    <div class="col-sm-2">
      <i class="fa fa-map-signs" style="vertical-align: middle;"></i>
      <p>Susirandate norimą kursą bei datą</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right" style="vertical-align: middle;"></font>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-pencil"></i>
      <p>Užsiregistruojate į norimą kursą</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right"></span>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-credit-card"></i>
      <p>Susimokate</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right"></span>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-hand-peace-o"></i>
      <p>Viskas!</p>
    </div>
  </div>
</div>

我正在使用bootstrap。 谢谢！

Answer 1

您需要将line-height上的span.fa设置为等于其他图标的font-size：

span.fa {
  font-size: 50px;
  line-height: 120px;
}

i.fa {
  font-size: 120px;
  text-align: center !important;
  text-decoration: none !important;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
}

i.fa-map-signs {
  background: #f6f6f6;
  color: #00b6ff;
}

i.fa-pencil {
  background: #f6f6f6;
  color: #00b6ff;
}

i.fa-credit-card {
  background: #f6f6f6;
  color: #00b6ff;
}

i.fa-hand-peace-o {
  background: #f6f6f6;
  color: #00b6ff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-grey text-center">
  <h2 style="margin-bottom: 100px;">Kaip tai veikia?</h2>
  <div class="row slideanim">
    <div class="col-sm-2">
      <i class="fa fa-map-signs" style="vertical-align: middle;"></i>
      <p>Susirandate norimą kursą bei datą</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right" style="vertical-align: middle;"></font>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-pencil"></i>
      <p>Užsiregistruojate į norimą kursą</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right"></span>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-credit-card"></i>
      <p>Susimokate</p>
    </div>
    <div class="col-sm-1">
      <span class="fa fa-arrow-right"></span>
    </div>
    <div class="col-sm-2">
      <i class="fa fa-hand-peace-o"></i>
      <p>Viskas!</p>
    </div>
  </div>
</div>