У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.
Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.
Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.
Горизонтальное центрирование элемента достаточно легко реализовать (с помощью 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 (межстрочный интервал) больше чем размер шрифта.
По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.
В данном случае высоту родительского элемента указывать необязательно.
#child { line-height: 200px; }
Данный метод работает во всех браузерах, однако не забывайте, что его стоит использовать для строчки текста. Если ваш текст занимает более одной строки, примените другой метод. Значение свойства line-height может быть любым, но не меньше чем высота шрифта. На практике данный метод отлично подходит для центровки горизонтального меню.
Как я уже писал, содержимое ячейки можно центрировать с помощью свойства CSS vertical-align . Родительский элемент необходимо представить как таблицу, дочерний элемент обозначим как ячейку и применим к нему свойство vertical-align со значением middle . Таким образом, любой контент в элементе-потомке будет центрирован по вертикали. Css код приведен ниже.
#parent { display: table;} #child { display: table-cell; vertical-align: middle; }
К сожалению, данный метод не работает в старых версиях браузера IE. Если вам требуется поддержка браузера IE6 и ниже, добавьте объявление display: inline-block дочернему элементу.
#child { display: inline-block; }
Данный метод предназначен для элементов блочного уровня и работает во всех браузерах. Необходимо задать высоту элементу, который необходимо центрировать.
Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.
#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }
Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.
Наша задача: подвинуть дочерний элемент вверх и влево, относительно родительского элемента так, чтобы визуально дочерний элемент центрировался по вертикали и горизонтали. Именно поэтому требуется знать высоту и ширину дочернего элемента.
Итак, нам следует задать дочернему элементу отрицательное верхнее и левое поле равное половине, соответственно, ширине и высоте дочернего элемента.
В отличие от первых двух методов, данный метод предназначен для элементов блочного уровня. Метод работает во всех браузерах, однако контент может превысить высоту родительского элемента и выйти за его пределы. Данный метод лучше всего работает, когда высота и ширина элементов зафиксирована.
Как и в предыдущем методе, родительский и дочерний элемент позиционируются, соответственно, относительно и абсолютно.
В коде CSS я центрирую дочерний элемент и по вертикали и по горизонтали, однако вы можете использовать только центрирование по вертикали.
#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }
Идея данного метода в том, что можно позиционировать дочерний элемент, используя значения свойств top , left , right , bottom равные 0. Так как наш элемент-потомок меньше родительского элемента, он не сможет «прилипнуть» к элементу родителю.
Значения полей для всех четырех сторон дочернего элемента равны нулю, благодаря этому элемент центрируется по вертикали относительно родителя. К сожаления данный метод имеет те же недостатки, что и предыдущий метод: необходимо фиксировать высоту и ширину потомка, отсутствие поддержки старых браузеров IE.
В этом методе мы явно назначаем родительскому элементу равные отступы (нижний и верхний), благодаря этому дочерний элемент визуально центрируется по вертикали.
#parent { padding: 5% 0; } #child { padding: 10% 0; }
Я использую относительные размеры. Если размеры блоков зафиксированы, то понадобится произвести некоторые математические расчеты.
Например, если элемент-родитель имеет высоту 400px, а дочерний 100px, то следует установить верхний и нижний отступ по 150px.
150 + 150 + 100 = 400
В этом методе задействован пустой плавающий (float) блок, который контролирует вертикальное положение дочернего элемента. Плавающий блок div необходимо поставить перед дочерним элементом, смотрите код HTML ниже.
#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }
Сначала мы сдвигаем плавающий блок влево (или вправо) и назначаем ему высоту 50% от родительского элемента. Таким образом, плавающий блок заполнит верхнюю половину родительского элемента.
Так блок плавающий, то он удален из общего потока документа, следовательно, дочернему блоку следует назначить свойство clear со значением both . Я поставил значение both , однако вы можете использовать то значение, которое совпадает с направлением позиционирования плавающего элемента.
Сейчас верхний край дочернего элемента лежит непосредственно под нижним краем плавающего элемента. Нам требуется приподнять дочерний элемент на половину высоты плавающего элемента. Для этого достаточно установить для плавающего блока отрицательное нижнее поле равное 50%.
Работает во всех браузерах. Недостаток метода в том, что необходим пустой блок и требуется знать высоту дочернего элемента.
Вообще центровка HTML элементов на странице - это дело не сложное. В некоторых случаях... веб разработчикам приходится ломать голову, чтобы найти лучшее решение.
Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:
Порой, самое простое решения является самым лучшим:
Div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; }
Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.
Ещё одно решения для горизонтальной центровки:
Div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }
Заметьте что для этого способа нужно выставить свойство display: block.
Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.
Center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; }
Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.
Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:
Absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%); } .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:
Center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; }
Есть несколько минусов:
Наверное самый простой вариант.
Center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; }
Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:
Center { background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 и ранних версиях; Android, старых WebKit */ display: -moz-box; /* Firefox (может и глючить) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
В некоторых случаях, данный способ более универсален чем использование flexbox:
Center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; } .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }
Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:
Top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:
Center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px - 2)); }
Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:
Center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%); left: calc(50% - 20%); }
Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в 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;
}
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
Outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
http://jsfiddle.net/c1bgfffq/6/
Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
http://jsfiddle.net/c1bgfffq/12/
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/c1bgfffq/15/
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Для этого нужно:
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.
Outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
http://jsfiddle.net/c1bgfffq/13/
Минус данного способа - должна быть известна высота внутреннего блока.
Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/c1bgfffq/9/
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
Outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
http://jsfiddle.net/c1bgfffq/14/
Минус данного способа − Flexbox поддерживается только современными браузерами.
Теги: Добавить метки
Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.
Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.
В качестве примера рассмотрим следующий фрагмент:
и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.
Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:
div {
display: table-cell;
vertical-align: middle;
}
div {
display: table-cell;
vertical-align: bottom;
}
Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):
div {
position: relative;
}
div span {
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}
Этот набор правил работает и в «правильных» браузерах.
Указывать свойства
Div span {
display: block;
width: 100%;
}
не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.
Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить - введём ещё один строковый элемент:
Материал для изучения:
Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.
Синтаксис CSS vertical-align
... vertical-align : value ; ...
Значение vertical-align по умолчанию:
Чаще всего vertical-align используется в ячейках таблиц. В теге
или | |||||
Выравнивание по верху |
Выравнивание по середине |
Выравнивание по низу |
Выравнивание по верху |
Выравнивание по середине |
Выравнивание по низу |
Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub
Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.
Преобразуется на странице в следующее:
Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз
Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).
Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:
object.style.verticalAlign ="VALUE "