Горизонтальное и вертикальное выравнивание элементов на CSS. CSS - Выравнивание по центру
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает. 1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
Parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры. Parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
/* ширина и высота 2 блока */
width: 500px;
height: 250px;
/* Значения определяются в зависимости от его размера */
/* margin-left = - width / 2 */
margin-left: -250px;
/* margin-top = - height / 2 */
margin-top: -125px;
}
Браузеры, которые поддерживают данное решение: 3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах. Parent {
position: relative;
}
.child {
position: absolute;
/* ширина и высота 2 блока в % */
height: 50%;
width: 50%;
/* Значения определяются в зависимости от его размера в % */
left: 25%; /* (100% - width) / 2 */
top: 25%; /* (100% - height) / 2 */
}
Браузеры, которые поддерживают данное решение: 1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:
Block {
margin-left: auto;
margin-right: auto;
}
Браузеры, которые поддерживают данное решение: 2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:
Parent {
text-align: center;
}
.child {
display: inline-block;
}
Браузеры, которые поддерживают данное решение: 1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
Parent {
line-height: 500px;
}
.child {
display: inline-block;
vertical-align: middle;
}
Браузеры, которые поддерживают данное решение: 2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы. Parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
Браузеры, которые поддерживают данное решение: Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях. Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
margin: -125px 0 0 -125px;
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
}
Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
width: 250px;
height: 250px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
}
Parent {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
> .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
.block {
display: inline-block;
img {
display: block;
border: none;
}
}
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент. Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
white-space: nowrap;
text-align: center;
font-size: 0;
&:before {
height: 100%;
display: inline-block;
vertical-align: middle;
content: "";
}
}
.block {
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
img {
display: block;
border: none;
}
}
Либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы: Parent {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
white-space: nowrap;
text-align: center;
font-size: 0;
&:before {
height: 100%;
display: inline-block;
vertical-align: middle;
content: "";
}
}
.block {
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
img {
display: block;
border: none;
}
}
Parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: auto;
}
.block {
background: #60a839;
img {
display: block;
border: none;
}
}
Parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: auto;
}
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img {
display: block;
}
}
Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: none;
border: none;
outline: none;
}
.block {
display: inline-block;
img {
display: block;;
border: none;
}
}
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя
, масштабировать её по размеру родителя
. Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д. Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block; если для элемента заданы размеры
если для элемента не заданы размеры и он не пустой
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю
CSS - Выравнивание блока по центру
CSS - Выравнивание по горизонтали
CSS - Выравнивание по вертикали
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.Вариант 1. Отрицательный отступ.
Позиционируем блок
атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока
. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок
не совсем корректно ведёт себя в окружении скроллбаров - он попросту обрезается так как имеет отрицательные отступы. Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока
задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя
, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.Вариант 3. Таблица.
Задаём родителю
табличные стили, ячейке родителя
устанавливаем выравнивание текста по центру. А блоку
задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Пример: jsfiddle.net/serdidg/fk5nqh52/3 .Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя
задать стили псевдо-элементу
before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока
ставится модель строчного блока, выравнивание по центру. Чтобы блок
не «падал» под псевдо-элемент
, когда размеры первого больше чем родителя
, указываем родителю
white-space: nowrap и font-size: 0, после чего у блока
отменяем эти стили следующими - white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем
и блоком
в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа - поддержка IE от 10-й версии включительно. caniuse.com/#feat=flexbox Вариант 6. Transform.
Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script"а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .Вариант 7. Кнопка.
Пользователь вариант, где блок
обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.Бонус
Используя идею 4-го варианта, можно задавать внешние отступы для блока
, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/nfqg9rza/2 .
Пример: jsfiddle.net/serdidg/nfqg9rza/3 .
Пример c большой картинкой: 1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div {
width: 300px;
margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button {
height: 50px;
line-height: 50px;
}
2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
Some text here