如何将字体图标和跨度居中

Question

我有这个标记。我需要将彼此相邻的 <i> 和 <span> 居中对齐（水平和垂直）。请指导

<span (click)="onGoBackClick($event)" class="cursor-click">
  <i class="fa fa-arrow-circle-left fa-2x"></i>
  <span>Go back to previous page</span>
</span>

Answer 1

Flexbox 解决方案：

.cursor-click {
  display: flex;
  align-items: center;
}

垂直对齐解决方案：

.cursor-click i, 
.cursor-click span {
  vertical-align: middle;
}

Answer 2

如果你需要居中，flexbox 是一个很好的解决方案：

.cursor-click {
    display: flex;
    justify-content: center; // center horizontally
    align-items: center; // center vertically
}

此处演示：https://codepen.io/aureliendebord/pen/VNOGZz