Выравнивание по вертикали внутри div. Все способы вертикального выравнивания в CSS

В процессе верстки веб-страниц достаточно часто встречается задача центрирования блоков. Это может быть как вертикальное, так и горизонтальное центрирование.

Например, если сайт имеет фиксированную ширину, то рационально будет выровнять его по центру окна браузера, т.к. это упрощает чтение текста(особенно если монитор большой). Некоторые дизайны вообще предполагают расположение блока в центре окна браузера, т.е одновременно вертикальное и горизонтальное центрирование.

Для начала поговорим о горизонтальном центрировании. Наиболее популярный прием, это когда блок центрируется установкой размеров правого и левого margin в "auto" . Допустим, мы хотим отцентрировать блок с id ="container" шириной 860px. В таком случае в CSS файле нужно написать:

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
}

Однако I.E. старых версий(5.0 например) не выровняет этот блок по центру. Конечно, такие древние браузеры уже никто не использует(из 1800 моих дневных посетителей - только 1), однако на всякий случай, лучше сделать, чтобы и там работало:)

Для этого, родительскому элементу, т.е тому, внутри которого мы центрируем наш блок(обычно родительским элементом является тег BODY), нужно задать параметр text-align:center . В таком случае блок выровняется по центру, однако и все его содержимое, также выровняется по центру, а нам этого не нужно. Поэтому, внутри этого блока ставим выравнивание по умолчанию - text-align:left .

body {text-align:center}

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
text-align:left;
}

Существует также другой способ горизонтального выравнивания блока, основанный на . Как Вы наверное знаете, по умолчанию, любой блочный элемент прижимается к левому краю родительского элемента. Поэтому, чтобы выровнять его по центру нужно:

2. Сместить его вправо на 50% ширины окна браузера

3. Используя отрицательный отступ, сместить его влево на расстояние, равное половине ширины блока.

Таким образом, блок окажется по центру. Для большей наглядности, посмотрите ролик ниже:

CSS код примера:

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Следует отметить, что если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, то для этого другого блока нужно задать position:relative;

Предположим, наш блок #container, который нужно выровнять по центру, лежит внутри блока #wrap. Тогда код будет выглядеть следующим образом:

#wrap{position:relative}

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Теперь давайте рассмотрим случай, когда нужно выровнять блок по центру страницы, т.е. применить одновременно горизонтальное и вертикальное центрирование. Здесь опять же применим позиционирование. Итак нам нужно:

1. Задать блоку абсолютное позиционирование

2. Сместить его вправо на 50% и вниз на 50% , тем самым поставив его верхний левый угол в центр окна браузера.

3. Используя отрицательный отступ, сместить его вверх на расстояние, равное половине высоты блока, и влево на расстояние, равное половине ширины блока.

Таким образом, блок окажется в центре веб-страницы.

Допустим высота нашего блока 600px , ну а ширина 860 px . Тогда CSS код будет выглядеть следующим образом:

#container {
background-color:#559964;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-430px;
height:600px;
width:860px;
}

Надеюсь сам принцип Вам понятен.

Оцените урок: 1 2 3 4 5

Комментарии:

Буду первым кто посмотрел урок!!!

Эх... Вторая =) Недавно встретилась с этой проблемой в IE, мучалась долго)) Спасибо =)

Спасибо, страница в закладках)))

Большое спасибо, Андрей, за новые уроки!

Просто спасибо,я думаю добавить тут не чего))

Спасибо за урок, буквально пару дней назад пытался таое сделать, немного помучился и временно отложил

А у меня проблема: сайт в Mozille Firefox не хочет выравниваться, прилип к левому краю и все, ничего из вышеперечисленного не помогает (то же и в Opera).

а почему это не работает? - "если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, о для этого другого блока нужно задать position:relative;"

Огромное спасибо!!просто ГИГАНТСКОЕ спасибо!Дай Бог Вам здоровья!

Всё отлично, но только почему то все изображения встают на места только после обновления браузера. Подскажите пожалуйста -почему так происходит?

Андрей, добавьте пожалуйста поиск по сайту.

Добавить комментарий.

Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem { margin-left: auto; margin-right: auto; width: 50%; }

Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align .wrapper { text-align: center; }

Я выровнен по центру

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }

Я выровнен по центру

Способ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:

Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }

• Главная
• Об авторе

Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.

line-height .wrapper { height: 100px; line-height: 100px; }

Я выровнен по вертикали

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }

Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :

Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }

Я выровнен по вертикали

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее 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" }) } })

Постепенно входят в повседневность новые возможности 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; только по вертикали */ } Lorem ipsum dolor sit amet

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

В 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%); }

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

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; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

... ...

Block { margin-left: auto; margin-right: auto; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

... ...

Parent { text-align: center; } .child { display: inline-block; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

... ...

Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Parent { display: table; } .child { display: table-cell; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

Если вы когда-либо пробовали, то это сложно, особенно если вы хотите избежать использования таблиц. К счастью, наши крики о помощи были услышаны, и одно из новых вооружений, добавленных в арсенал CSS для решения этой проблемы, это тип макета, известный как гибкий макет коробки. Как вы узнаете через несколько мгновений, которые предоставляет вам некоторые действительно отличные функции, чтобы упростить сложные макеты. Часть этой отличной функциональности также позволяет вам центрировать ваш контент вертикально и горизонтально, и вот что мы рассмотрим в этом уроке. Вы можете сделать это с дополнением до некоторой степени, но это может вывести ваш макет на более мелкие экраны. Добавление пользовательского класса CSS в таблицу стилей означает, что вы можете вертикально центрировать любой контент за считанные секунды.

Горизонтальное выравнивание определяет, как левый и правый края абзаца совпадают между левым и правым краями текстового поля. Вертикальное выравнивание определяет размещение знака в текстовом поле по вертикали. Отсутствие хороших способов вертикального центрирования элементов в CSS было темным недостатком его репутации в значительной степени для всего ее существования.

Первый метод с line-height

Первый способ идет простой и в чем то банален, где есть свои недостатки что будет идти ограничение в применении. При кодировании html страниц для сайта междустрочный интервал текстового содержимого, вероятно, является одним из атрибутов, который обычно остается по умолчанию. Вообще нам нужно задать высоту самой строки, которая идет с аналогичной высотой для блока, где используется line-height свойство.

Это первый метод, что показан на демонстраций

Constutesim_first {
border: 2px solid #bf1515;
height: 175px;
}
.constutesim_first > p{
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
}

Аналогичным методом, есть возможность реализовать, как выставить изображение, что будет по центру и безусловно по вертикали. Здесь остается только прописать одно свойство vertical-align: middle; которое отвечает за вывод картинки.

Вторая вариация, которая идет с изображением

Second-variation{
border: 2px solid red;
line-height:158px;
}

Second-variation div{
text-align:center;
}
.second-variation img {
vertical-align: middle;
border: 0px solid #3a3838;
}

Выравнивание со свойством position

Это вероятно самый известный метод, но больше всего распространенный по применению к использованию с помощью CSS. Но здесь нужно добавить, что он также не идеален и у этого метода, также есть свои небольшие нюансы, которые связаны с центром элемента, что если будет задаваться в процентном соотношение, то станет центрирование по левую сторону верхней стороны, внутр самого блога.

Cherevert-variation {
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
}

Cherevert-variation div{
display: table-cell;
vertical-align: middle;
text-align:center;
}

Выравнивание со свойством flex

Здесь мы подходим, к более оригинальному варианту, у которого имеются свои свойства, что можно редко встретить верстки интернет ресурса. Но все же они применяются, что в каких то случаях они полезны. Это устанавливает основную ось, таким образом, определение элементов гибкости направления помещается в контейнер гибких дисков.

Выравнивание со свойством transform

Vertical-medilpasudsa {
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
}
.vertical-medilpasudsa > div{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}

Если вы хотите центрировать знаки по горизонтали в элементе, вы должны использовать text-align: center. Один из вариантов, если вы хотите центрировать его по вертикали, и у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.

Если вам нужно центрировать текст внутри элемента, такого как div, header или paragraph, вы можете использовать свойство text-align CSS.

Text-align имеет несколько допустимых свойств:

Center: Текстура центрирована;
left: Будет выравниваться с левой стороны контейнера;
right: Выровнен с правой стороны контейнера
justify: Вынужден ровняться, как с левой, так и с правого края контейнера, за исключением крайних строк;
justify-all: Заставляет крайнее строку оправдывать знаки;
start: То же самое, что по левую, только если направление идет с лева на правую сторону. Но правильно будет, если изначально задать направление текстового направление, что произойдет справа налево;
End: Противоположность начала;
match-parent: Аналогично наследованию, кроме начала и конца, вычисляется относительно родительского элемента;

Используйте эти свойства для выравнивания текста внутри родительского или оберточного div. Если вы хотите центрировать текст по горизонтали в элементе, вы должны использовать text-align: center.

Один из вариантов, если вы хотите центрировать его по вертикали, если у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.

Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе .

Этот метод будет отлично работать во всех браузерах.

Center-div { margin: 0 auto; width: 100px; }

Пример

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Этот метод div выравнивания по центру будет работать во всех браузерах.

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }

Пример

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина (width ).

В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .

Outer-div { padding: 30px; text-align: center; } .inner-div { display: inline-block; padding: 50px; }

Пример

Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока (inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

Outer-div { padding: 30px; } .inner-div { margin: auto; width: 100px; height: 100px; }

Пример

У внутреннего div-элемента должна быть указана ширина (width ) и высота (height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

Outer-div { position: absolute; bottom: 30px; width: 100%; } .inner-div { margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; }

Пример

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

Center-div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; }

Пример

У div-элемента должна быть установлена ширина (width ) и высота (height ).

Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.

Center-div { margin: 0 auto; max-width: 700px; }

Пример

У центрированного div-элемента должно быть установлено свойство max-width .

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; max-width: 700px; }

Пример

У внутреннего div должно быть установлено свойство max-width .

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

Container { text-align: center; } .left-div { display: inline-block; max-width: 300px; vertical-align: top; } .right-div { display: inline-block; max-width: 150px; } screen and (max-width: 600px) { .left-div, .right-div { lef max-width: 100%; } }

Пример

Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

Container { display: flex; align-items: center; justify-content: center; height: 100vh; } .item { background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; }