Вертикальное выравнивание div. Элементарно
margin: auto
Это не работает. Свойство margin: auto
выравнивает элемент только по горизонтали. И не забудьте, что есть два важных условия для работы этой фишки: элемент должен быть блочным и иметь фиксированную ширину, только так.
See the Pen margin: auto by AsheGentle (@ashegentle) on CodePen.29275
line-height
Если у вас строка, только одна строка (что важно), и вам всё ещё требуется выровнять её по центру, задайте ей line-height
, равный высоте родителя. Да, высоту родителя тоже придётся жёстко зафиксировать. И при появлении второй строки эффект пропадёт.
See the Pen line-height by AsheGentle (@ashegentle) on CodePen.29275
vertical-align
А вот теперь действующий и самый интересный способ. Есть не зря придуманное свойство vertical-align: middle
. Но одного его не достаточно, я не шучу =) Разберёмся по порядку.
Во-первых, в таблицах свойство работает совершенно иначе. Будучи применённым к ячейке оно выровняет её содержимое. Забудьте об этом, если не собираетесь использовать таблицы.
Во-вторых, vertical-align
прекрасно справится со строчными и строчно-блочными элементами. При этом выравнивать оно будет сам элемент относительно окружающих. Отсюда простой вывод: никаких проблем, если у вас два элемента или больше. Задав им обоим vertical-align: middle
вы получите аккуратные элементы, выровненные по высоте относительно друг друга.
А если не два? Тогда вспомним про псевдоэлементы! В визуальном представлении они располагаются внутри вызвавшего их элемента. А значит, внутри родителя уже как минимум два элемента есть. Делаем их inline
или inline-block
, ещё немного магии и выравниваем по центру.
Задача решена? Ну почти. Остаются маленькие нюансы: те, что преследуют идущие друг за другом строчные элементы. Даже принудительно задав псевдоэлементу ширину в 0px, вы всё равно обнаружите неприятное расстояние. Я говорю о пробелах между элементами. Тут вы можете использовать любой работающий способ, будь то вытягивание в строку, комментарии или font-size: 0
.
See the Pen vertical-align by AsheGentle (@ashegentle) on CodePen.29275
flex
Этот абзац я дописала уже в 2018 году.
Простой и безопасный способ сейчас — это использование флексов. Они позволяют выравнивать элементы по осям не зависимо ни от чего. Главное помнить про поддержку и использовать префиксы.
Выбираем ось, выравниваем. Проще некуда.
See the Pen vertical-align-flex by AsheGentle (@ashegentle) on CodePen.29275
Готово.