студия интернет маркетинга
Для регионов
Консультация
Главная / Лаборатория BUKLETA / Как выровнить всё по центру css/html?

Как выровнить всё по центру css/html?

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

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

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

text-align: center;

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

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

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

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

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

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

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

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

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

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

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

Реализация:

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

Наши работы

tuningspeed.ru

Редизайн  и переработка старинного крупного магазина автотюнинга в г. Санкт-Петербурга.

СМОТРЕТЬ >>
service-vao.ru

Ведущий автосервис г.Москва.

СМОТРЕТЬ >>
k-dvor.ru

Крупнейшей производитель и поставщик спортивно-игрового оборудование и малых архитектурных форм по всей РФ.

СМОТРЕТЬ >>
Все проекты
Остались вопросы? просто напиши нам и мы на них ответим

Система управления сайтом HostCMS
РАССЧИТАТЬ САЙТ ИЛИ УСЛУГИ