如何居中一个字体真棒图标和跨度

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;
    justify-content: center; // center horizontally
    align-items: center; // center vertically
}

在这里演示：https://codepen.io/aureliendebord/pen/VNOGZz

Answer 2

Flexbox解决方案：

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

垂直对齐解决方案

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