Как отцентрировать текст по вертикали?

input[type=checkbox] + span:before {
  position: relative;
  top: 4px;
}

<label title="добавить товар в сравнение">
  <input class="compare" type="checkbox" data-id="199">
  <span class="compareLabel">
  <i class="fa fa-circle-o" aria-hidden="true"></i>
  Сравнить
</span>
</label>

input[type=checkbox] {
    display: none;
}

.compareLabel {
    color: #98a4a7;
    font-weight: normal;
    font-size:14px;
    line-height: 24px;
    vertical-align: top;
    display: inline-block;
}

.compareLabel i {
    line-height: 24px;
    font-size: 24px;
    vertical-align: top;
    display: inline-block;
}