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

Question

[sabviktor]

Есть вот такая кнопка:

<button>
    <i class="fi fi-br-menu-burger"></i>
    Меню
</button>

.menu button {
    padding: 7px 13px;
    background-color: #5582ff;
    color: white;
    border: none;
    border-radius: 7px;
    height: 30px;
}

И вот результат:


Подскажите пожалуйста как мне эту иконку сделать так чтобы она была по середине вертикально а не выше текста как сейчас. Я раньше не сталкивался с иконками в кнопках...
(line-height не помогает)

Comments

[Ankhena]

Супер вариант: перестать использовать для этого тег <i>, который предназначен вообще не для этого.
Заменить на псевдо с фоном или просто фон.

Возможно, хватит display: inline-block и vertical-align:middle для i. Но вы не показали какие у него там стили сейчас. (Обычно они у таких библиотек подустаревшие).
Лучше всего делать песочницу с демонстрацией проблемы на сервисах типа codepen.io, чтобы нам не нужно было играть в угадайку.

Либо флекс и align-items

И лучше бы не задавать кнопке жесткую высоту, а попадать в неё паддингами. Если никак, то минимальную.

Answer 1

[Сергей delphinpro]

.menu button {
    /*...*/
    display: inline flex;
    align-items: center;
}