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

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