До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру. Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться. Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner . Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны
. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle . Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block . Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы. Outer {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #ffc;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #fcc;
}
Почему так произошло?
Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого
(кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок. Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них. Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока. Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS. Outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков. Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle . Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
Минус данного способа заключается в том, что должна быть известна высота внешнего блока. Для этого нужно: Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto . Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2. Outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
Минус данного способа - должна быть известна высота внутреннего блока. Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform . Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование. Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда? Outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
Минус данного способа − Flexbox поддерживается только современными браузерами. Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. 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;
}
}
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя
, масштабировать её по размеру родителя
. Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. 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;
}
}
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя
, масштабировать её по размеру родителя
. В 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;
}
Браузеры, которые поддерживают данное решение: Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю
Сравним следующие подходы. Выравнивание с помощью:
В качестве иллюстрации рассмотрим следующий пример.
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/ Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
http://jsfiddle.net/c1bgfffq/1/
.outer-wrapper {
display: table;
}
.outer {
display: table-cell;
}
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.
http://jsfiddle.net/c1bgfffq/6/ Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .
http://jsfiddle.net/c1bgfffq/12/
http://jsfiddle.net/c1bgfffq/15/ Выравнивание с помощью "растягивания"
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
.outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
http://jsfiddle.net/c1bgfffq/4/ Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
http://jsfiddle.net/c1bgfffq/13/ Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .
http://jsfiddle.net/c1bgfffq/9/ Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
http://jsfiddle.net/c1bgfffq/14/ Какой способ выбрать?
Нужно исходить из постановки задачи:
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка 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 большой картинкой:
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка 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. Кнопка.
Пользователь azproduction вариант, где блок
обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.Бонус
Используя идею 4-го варианта, можно задавать внешние отступы для блока
, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/nfqg9rza/2 .
Пример: jsfiddle.net/serdidg/nfqg9rza/3 .
Пример c большой картинкой: CSS - Выравнивание блока по центру
CSS - Выравнивание по горизонтали
CSS - Выравнивание по вертикали