У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали
? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.
Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.
Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.
Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .
Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .
Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.
К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .
Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.
Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.
По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.
В данном случае высоту родительского элемента указывать необязательно.
Здесь текст
p{
line-height:200px;/* устанавливаем высоту строки в соответствии с высотой блока */
margin:0;/* убираем внешние отступы, если они есть */
text-align:center;/* выравниваем текст по центре по горизонтали */
padding: 0;/* убираем внутренние отступы, если они есть */
}
/* end №1*/
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Пример. Демо №2
/* №2 */
.talign2{
border: 1px solid red;
line-height:200px;/* высота строки блока */
}
.talign2 div{
text-align:center;/* выравниваем элементов по центре по горизонтали */
}
.talign2 img{
vertical-align:middle;/* выравниваем картинки по центре по вертикали */
border: 1px solid black;
}
/* end №2*/
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
/* №3 */
.talign3{
border: 1px solid red;
height:200px;/* высота блока */
position: relative;
}
.talign3 div{
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -5% 0 0 -25%;
border: 1px solid black;
}
/* end №3*/
Здесь используем старую технику, превратив элементы в таблицу с ячейками. При этом теги таблицы
применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?
Пример. демо №4
Пример. демо №4
/* №4 */
.talign4{
border: 1px solid red;
height:200px;/* высота блока */
display: table;
width: 100%;
}
.talign4 div{
display: table-cell;
vertical-align: middle;
text-align:center;
}
/* end №4*/
Выравнивание со свойством flex
Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.
Центрирование элементов по вертикали с помощью CSS является задачей, которая представляет определенную трудность для разработчиков. Однако имеется несколько методов ее решения, которые достаточно просты. В данном уроке представлено 6 вариантов вертикального центрирования содержания.
Начнем с общего описания задачи.
Задача вертикального центрирования
Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный - задаем ему ширину и автоматическую установку левого и правого полей.
Большинство людей, используя свойство text-align:
, обращаются к свойству vertical-align
для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign
, который укрепляет веру в то, что vertical-align
правильный путь к решению задачи.
Но атрибут valign
работает только в ячейках таблицы. А свойство vertical-align
очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.
Значение свойства vertical-align
действует по отношению к родительскому строчному элементу.
- В строке текста выравнивание производится по отношению к высоте строки.
- В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).
Но, к сожалению, свойство vertical-align
не действует в блочных элементах (например, параграфах внутри элемента div
). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.
Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.
Метод line-height
Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.
По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .
HTML:
Нужный текст
CSS:
#child {
line-height: 200px;
}
Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.
Центрирование изображения с помощью line-height
А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.
HTML:
CSS:
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
Значение свойства line-height
должно быть больше высоты изображения.
Метод таблиц CSS
Выше упоминалось, что свойство vertical-align
применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align
для вертикального центрирования содержания.
Примечание:
Таблица CSS не является тем же, что и HTML таблица.
HTML:
Содержание
CSS:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Мы устанавливаем табличный вывод для родительского элемента div
, а вложенный элемент div
выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align
для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.
В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div
будет изменять размер в соответствии со своим содержанием.
Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block
для вложенного контейнера.
Абсолютное позиционирование и отрицательные поля
Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.
В коде примера выполняется одновременное центрирование по горизонтали и вертикали:
HTML:
Содержание
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div
устанавливаем значения свойств top
и left
равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.
Данный метод работает не во всех браузерах.
Абсолютное позиционирование и растягивание
В коде примера выполняется центрирование по вертикали и горизонтали.
HTML:
Содержание
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right,
и left
значения 0.
Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div
по центру родительского элемента.
К сожалению, данный метод не работает в IE7 и ниже.
Равные отступы сверху и снизу
В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.
HTML:
Содержание
CSS:
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.
Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.
Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.
150 + 150 + 100 = 400
Использование % позволяет расчеты оставить браузеру.
Данный метод работает везде. Обратной стороной является необходимость в расчетах.
Примечание:
Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.
Плавающий div
Данный метод использует пустой элемент div
, который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div
размещается до нашего вложенного элемента в коде HTML.
HTML:
Содержание
CSS:
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
Мы смещаем пустой div
влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.
Так как данный div
является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both
, но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div
.
Верхняя граница вложенного элемента div
находится непосредственно под нижней границей пустого элемента div
. Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom
для плавающего пустого элемента div
.
Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div
и знаний о высоте вложенного элемента.
Заключение
Все описанные методы просты в использовании. Трудность заключается в том, что ни один из них не подходит для всех случаев. Нужно анализировать проект и выбирать тот, который подходит наилучшим образом под требования.
Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.
Горизонтальное выравнивание
margin: auto
Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:
Elem {
margin-left: auto;
margin-right: auto;
width: 50%;
}
Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.
text-align: center
Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:
Выравнивание с помощью text-align
.wrapper {
text-align: center;
}
Я выровнен по центру
position и отрицательный margin влево
Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку 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
Способ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:
Выравнивание с помощью display: inline-block + text-align: center;
.navigation {
text-align: center;
}
.navigation li {
display: inline-block;
}
Вертикальное выравнивание
line-height
Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.
line-height
.wrapper {
height: 100px;
line-height: 100px;
}
Я выровнен по вертикали
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; :
Вертикальное выравнивание 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"
})
}
})
Применение 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; только по вертикали */
}
Lorem ipsum dolor sit amet
Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.
Ресурсы по теме
Помощь проекту
Сегодня, уважаемый читатель, мы с вами разберемся с проблемой вертикального выравнивания в блоке div
.
Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align.
И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).
Постановка задачи:
Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.
Теперь приступим к решению поставленной задачи.
И так, у нас есть блок, высота его может меняться:
Содержимое блока
Первое, что приходит в голову – это сделать следующий финт:
Содержимое блока
Есть все основания предполагать, что фраза Содержимое блока
выровняется по центру высоты div-контейнера.
Но не тут-то было! Никакого ожидаемого выравнивания по центру таким образом мы не добьемся. А почему? Казалось бы все указано правильно. Оказывается вот в чем загвоздка: свойство vertical-align
можно применять только для выравнивания содержимого ячеек таблиц или для выравнивания строчных элементов друг относительно друга.
По поводу выравнивания внутри ячейки таблицы, я думаю, все понятно. А вот другой случай со строчными элементами я поясню.
Вертикальное выравнивание строчных элементов
Предположим есть у вас строка текст, которая разбита строчными тегами
на части:
Вас приветствует кусок текста!
Под строчным тегом понимается контейнер, появление которого не приводит к переносу содержимого на новую строку.
Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.
– это блочный тег. Если мы заключим куски текста в блоки ,
то каждый из них окажется на новой строке. Используя тег
, который, в отличие от
, является строчным, переноса контейнеров на новую строку не будет, все контейнеры
останутся в одной строке.
Контейнер
удобно использовать при задании части текста особого форматирования (выделение цветом, другим шрифтом и т.д.)
Для контейнеров
применим следующие свойства CSS:
#perviy{
vertical-align:sub;
}
#vtoroy{
vertical-align:3px;
}
#tretiy{
vertical-align:-3px;
}
В результате строка текста будет иметь вот такой вид:
Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align
с этой задачей прекрасно справляется.
Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.
Выравнивание по вертикали в div-контейнере
Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align
. Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align
работает для ячеек таблицы.
Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.
Ха, оказывается очень просто.
CSS-свойство display
позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:
Пусть у нас есть div класса textalign:
Содержимое блока
Для данного блока указываем следующее CSS-свойство:
Textalign{
display: table-cell;
}
Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align
в полной мере и будет работать желаемая центровка по вертикали.
Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell
(предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.
Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:
- Способ с применением дополнительного вспомогательного div-котнейнера
- Способ с использованием expression-а . Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
- Использование свойства line-height . Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
- Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.
Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell
(ни IE6, ни IE7, ни IE8
с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием
специально для браузеров семейства IE мы укажем другие свойства CSS.
Условный комментарий
Конструкция вида:
...
Инструкции, действующие только в случае выполнения условия в квадратных скобках...
называется условным комментарием (будьте внимательны, вид условного комментария должен полностью соответствовать приведенному примеру, с точностью до пробела).
Инструкции, содержащиеся в подобном условном комментарии будут выполнены только в случае, если браузер, интерпретирующий данный код, принадлежит к семейству IE.
Таким образом, используя условный комментарий, мы сможем спрятать кусок кода от всех браузеров кроме IE.
Решение задачи
Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:
Это какой-то проверочный текст.
Он состоит из двух строк.
Для div-контейнера класса textalign
задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):
Display: table-cell;
vertical-align: middle;
И еще два свойства, которые задают ширину и высоту для блока:
Width:500px;
height: 500px;
Этого вполне достаточно для выравнивания содержимого контейнера по центру относительно вертикали, во всех браузерах кроме IE
.
Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE
(именно для них мы использовали дополнительные блоки div
и span
):
Обращаемся к тегу div
внутри блока класса textalign
. Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.
Textalign div{
position: absolute;
top: 50%;
}
Такая конструкция означает: для всех тегов div внутри блока с классом textalign
применить перечисленные свойства.
Соответственно, стили заданные для блока textalign
видоизменяются:
Textalign{
display: table-cell;
vertical-align: middle;
width:500px;
height: 500px;
position: relative;
}
Теперь левая верхняя точка текстового блока смещена вниз на 50%.
Для пояснения происходящего я нарисовал иллюстрацию:
Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока
, а не его верхняя левая точка.
Теперь в ход пойдет тег span
и его относительное позиционирование:
Textalign span{
position: relative;
top: -50%;
}
Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!
Немного подшаманим
Перво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:
.textalign div{
position: absolute;
top: 50%;
}
.textalign span{
position: relative;
top: -50%;
}
Есть небольшая проблемка.
Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.
Решение проблемы:
нужно добавить свойство overflow: hidden
блоку textalign.
Детально познакомиться со свойством overflow
можно в .
Окончательный вид CSS-инструкций для блока textalign
имеет вид:
Textalign{
display: table-cell;
vertical-align: middle;
width:500px;
height: 500px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
Прошу пардону, забыл упомянуть один важный момент. Если вы будите пытаться задавать высоту блока класса textalign
в процентном соотношении
, то у вас ничего не выйдет
.
Центровка в блоке переменной высоты
Очень часто встречается необходимость задать высоту блока класса textalign
не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.
Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign
превращается именно в ячейку таблицы, благодаря свойству display:table-cell
).
В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table
и уже для него задавать процентное значение высоты. Тогда вложенный в него блок, с CSS-директивой display:table-cell
, благополучно унаследует высоту родительского блока.
Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:
Классу textalign
мы изменим значение свойства display
с table-cell
на table
и убирем директиву выравнивания vertical-align: middle
. Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.
Таким образом, CSS-свойства для блока класса textalign
будут иметь следующий вид:
Textalign{
display: table;
width:500px;
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid black;
}
Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign
(это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell
, тогда он унаследует высоту в 100% от родительского блока textalign
(фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle
.
Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign
.
Textalign div{
display: table-cell;
vertical-align: middle;
}
Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.
Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
Пример. Демо №2