Как правильно выравнивать по вертикали с помощью свойства «line-height»?

Question

[Александр]

Известен способ выравнивания элемента/текста внутри блока с помощью присвоения блоку фиксированной высоты и присвоения свойства line-height, равного этой высоте.
НО непонятен принципиально один момент. Вот я задаю тегу a (класс social) высоту 70px и line-height 70px, Самой шрифтовой иконке (класс fab ) задаю размер (font-size) 40px. Явно видно, что иконка не выровнялась по вертикали по центру.:
See the Pen LvejaV by AlexandrDev (@AlexandrDevZ) on CodePen. "/>

Но если я все тот же размер иконки font-size 40px. Прописываю уже не самой иконке с классом fab , а самому блоку- родителю, то все начинает работать и иконка встает по центру по вертикали. Почему так?

Comments

[Ankhena]

Но если я все тот же размер иконки font-size 40px. Прописываю уже не самой иконке с классом fab , а самому блоку- родителю, то все начинает работать и иконка встает по центру по вертикали. Почему так?

Потому что в первом варианте иконка i не выровнена относительно родителя, ссылки.
Для i надо задать line-height 70px. Сейчас у вас так и написано, но перебивается стилями от fontawesome. Проверяйте порядок подключения CSS.
Вот тоже самое, но при правильном порядке подключении файлов https://codepen.io/anon/pen/pBagze

Либо используйте флексы.

Answer 1

[igumenov]

потому что дочернему элементу нужно указать vertical-align: middle;

.fab{
    font-size: 40px;
    vertical-align: middle;
}