Добрый день! С вами на связи Антон. Сегодня будем ровнять в блоке div информацию по центру на примере простой фотогалереи.

Выровнять по горизонтали информацию в блоке div легко, для этого есть простое правило в CSS:

text-align с параметром center.

text-align: center;

А вот с выравниванием по вертикали у меня постоянно возникали проблемы.

В CSS есть правило vertical-align, но оно, как я понимаю, придумывалось изначально для ячеек таблиц, а таблицы нужны лишь для табличных данных, и поэтому правило не может подойти к оформлению фотогалереи.

Но давайте посмотрим что пишется в документации по vertical-align.

"Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы."

Что-то как-то сложно всё. Теперь ищем параметр middle.

"Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента."

Тоже как-то не очень понятно. Какие-то высоты, базовые линии, при первом прочтении ничего не понятно, надо разбираться сидеть, вникать в эту тему.

Читаем дальше, находим.

"Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
...
middle - выравнивает по середине ячейки."

То есть нам надо сымитировать табличку с ячейкой и уже можно выровнять информацию по центру.

Попробуем реализовать выравнивание в фотогалереи, фотогалерея - это частый гость современных вебсайтов.

Реализация:

Это всего лишь один из нескольких методов выравнивания!