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

Question

[busidoway]

День добрый. Здесь https://jsfiddle.net/drnbdL72/ у меня есть чекбокс с текстом. Чекбокс заменен на элемент шрифта awesome. У элемента размер шрифта 24px, а у текста 14px. Как отцентрировать текст по вертикали, чтобы он был на уровне середины элемента чекбокса?

Answer 1

[Vlad Tytcky]

Span:before дать vertical-align:middle;

Comments

[busidoway]

Спасибо, действительно, работает

Answer 2

[Глеб Кемарский]

Например, добавить

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

https://jsfiddle.net/glebkema/nzoh503j/

Comments

[busidoway]

Тоже как вариант. Спасибо.

[Глеб Кемарский]

busidoway: Этот вариант хорош, если по дизайнерским соображениям нужна "не совсем середина".

Answer 3

[devstudent]

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

Comments

[devstudent]

а как у вас работает чексбокс если у него стоит input[type=checkbox] {
display: none;
}
не лучше ли просто сверху наложить label ?

Answer 4

[Ivan Bogachev]

Можно и без :before такое делать codepen.io/sfi0zy/pen/RaBKBv