как центрировать потрясающую иконку и промежуток

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;
}