Опубликовано
Горизонтальное и вертикальное выравнивание элементов на CSS
Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.
Содержание статьи
- Горизонтальное выравнивание
- Вертикальное выравнивание
- Динамическое выравнивание элемента на странице
- Применение Flexbox
Последнее обновление — 1 апреля 2015.
Горизонтальное выравнивание
margin: auto
Выравнивание по горизонтали при помощи margin
используется при известной ширине центрируемого элемента. Работает для блочных элементов:
elem { margin-left: auto; margin-right: auto; width: 50%; }
Указание значения auto
правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.
text-align: center
Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание с помощью text-align</title> <style> .wrapper { text-align: center; } </style> </head> <body> <div class="wrapper"> <p>Я выровнен по центру</p> </div> </body> </html>
position и отрицательный margin влево
Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative
для позиционирования относительно него, центрируемому элементу position: absolute
, left: 50%
и отрицательный margin-left
, значение которого равно половине ширины элемента:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание с помощью position</title> <style> .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; } </style> </head> <body> <div class="wrapper"> <p>Я выровнен по центру</p> </div> </body> </html>
display: inline-block + text-align: center
Способ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание с помощью display: inline-block + text-align: center;</title> <style> .navigation { text-align: center; } .navigation li { display: inline-block; } </style> </head> <body> <ul class="navigation"> <li><a href="#">Главная</a></li><!-- <li><a href="#">Статьи</a></li><!-- --><li><a href="#">Об авторе</a></li> </ul> </body> </html>
Вертикальное выравнивание
line-height
Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>line-height</title> <style> .wrapper { height: 100px; line-height: 100px; } </style> </head> <body> <div class="wrapper"> <p>Я выровнен по вертикали</p> </div> </body> </html>
position и отрицательный margin вверх
Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute
и отрицательный margin
вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative
:
.wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }
Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.
display: table-cell
Для вертикального выравнивания применяется свойство display: table-cell
элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle
. Все это обернем в контейнер со свойством dislpay: table;
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вертикальное выравнивание display: table-cell</title> <style> .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; } </style> </head> <body> <div class="wrapper"> <p class="cell">Я выровнен по вертикали</p> </div> </body> </html>
Динамическое выравнивание элемента на странице
Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.
Подключим jQuery на страницу:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter()
. В качестве аргумента функции выступает сам элемент:
function alignCenter(elem) { // код здесь }
В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left
и top
:
function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + 'px', top: ($(window).height() - elem.height()) / 2 + 'px' // не забывайте добавить элементу position: absolute для срабатывания координат }) }
В первой строчке функции мы получаем ширину документа и отнимаем от нее ширину элемента, деленную пополам — это и будет центр страницы по горизонтали. Вторая строка делает то же самое, только с высотой, для выравнивания по вертикали.
Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:
$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + 'px', top: ($(window).height() - elem.height()) / 2 + 'px' }) } })
Применение Flexbox
Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента .wrapper
и центрируем контент внутри:
.wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ }
<div class="wrapper"> <div class="content">Lorem ipsum dolor sit amet</div> </div>
Это правило центрирует элемент по горизонтали и вертикали одновременно — margin
работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.
На момент написания по статистике caniuse.com Flexbox поддерживает 90+ процентов браузеров. За данной технологией будущее в верстке макетов. Более подробно смотрите выступление Вадима Макеева — Flexbox, теперь понятно и читайте спецификации.
Отличная статья!
Однако в способ выравнивания на основе jquery я бы добавил такую правочку:
function alignCenter(elem) {
var left = ($(window).width() - elem.width()) / 2;
var top = ($(window).height() - elem.height()) / 2;
elem.css({
left: ((left < 0) ? 0 : left) + 'px',
top: ((top < 0) ? 0 : top) + 'px'
})
}
Она не позволит уходить элементу за края при чрезмерном уменьшении размера окна.
Ого оказывается сколько способов.. всего парочку знал. Спасибо будем пользоваться