- Теория
- Теория
Горизонтальное и вертикальное выравнивание
Извечная проблема HTML-вёрстки — вертикальное выравнивание элементов. Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты.
Трюк строится на той особенности, что ячейка растягивается на всю ширину таблицы, а содержимое ячейки
просто центруется внутри неё с помощью свойств text-align
и
vertical-align
. Для этого нужны:
- контейнер-таблица
display: table
; - ячейка с содержимым
display: table-cell
; - горизонтальное и вертикальное выравнивание ячейки внутри таблицы.
Такой приём удобен, если нужно отцентровать какой-либо блок, например, модальное окно на странице. Проверим это!
Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует через 2 дня. Всего от 6080 ₽в месяц.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.