• Теория
  • Теория

Горизонтальное и вертикальное выравнивание

Извечная проблема HTML-вёрстки — вертикальное выравнивание элементов. Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты.

Трюк строится на той особенности, что ячейка растягивается на всю ширину таблицы, а содержимое ячейки просто центруется внутри неё с помощью свойств text-align и vertical-align. Для этого нужны:

  • контейнер-таблица display: table;
  • ячейка с содержимым display: table-cell;
  • горизонтальное и вертикальное выравнивание ячейки внутри таблицы.

Такой приём удобен, если нужно отцентровать какой-либо блок, например, модальное окно на странице. Проверим это!

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

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

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Таблицы на CSS» тренажёра «Табличные раскладки» можно после регистрации и оформления подписки.