лидер в новейших разработках систем защиты высоковольтных кабельных линий
Добрый день! С вами на связи Антон. Сегодня будем ровнять в блоке div информацию по центру на примере простой фотогалереи.
Выровнять по горизонтали информацию в блоке div легко, для этого есть простое правило в CSS:
text-align с параметром center.
text-align: center;
А вот с выравниванием по вертикали у меня постоянно возникали проблемы.
В CSS есть правило vertical-align, но оно, как я понимаю, придумывалось изначально для ячеек таблиц, а таблицы нужны лишь для табличных данных, и поэтому правило не может подойти к оформлению фотогалереи.
Но давайте посмотрим что пишется в документации по vertical-align.
"Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы."
Что-то как-то сложно всё. Теперь ищем параметр middle.
"Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента."
Тоже как-то не очень понятно. Какие-то высоты, базовые линии, при первом прочтении ничего не понятно, надо разбираться сидеть, вникать в эту тему.
Читаем дальше, находим.
"Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
...
middle - выравнивает по середине ячейки."
То есть нам надо сымитировать табличку с ячейкой и уже можно выровнять информацию по центру.
Попробуем реализовать выравнивание в фотогалереи, фотогалерея - это частый гость современных вебсайтов.
Реализация:
Это всего лишь один из нескольких методов выравнивания!
лидер в новейших разработках систем защиты высоковольтных кабельных линий
Редизайн и переработка старинного крупного магазина автотюнинга в г. Санкт-Петербурга.