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

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>

我正在使用引导程序。 谢谢！

Answer 1

您需要在span.fa line-height设置line-height等于其他图标的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>