如何居中fontawesome图标和跨度

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