Как сделать вертикальное выравнивание внутри блочного элемента

Автор: | 24.07.2018
1 комментарий

Итак, текущая задача, — выполнить выранивание по вертикале элемента внутри блочного элемента.

Методы выполнения задания. Имеются разнообразные методы, выделим классические:

  1. Представить блочный элемент в качестве ячейки в таблице (display: table-cell).
  2. IE6-7: способ expression.
  3. Уравнивание межстрочного диапазона (свойство line-height) и высоты блока (для однострочных элементов).
  4. Позиционирование посредством внешнего блока (position:absolute)
  5. Уравнивание при помощи свойства vertical-align.

display: table-cell

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

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ display: table-cell</title>
<style>
.wrapper {
display: table-cell;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class=»wrapper»>
Вертикально выравненная строка
</div>
</body>
</html>

Достоинства способа:

  • Легкость;
  • Допустимо выравнивание и одной, и несколько строк.

Отрицательные моменты способа:

  • Не действует в IE7 (хотя они и устарели) и младших версий;
  • Без вспомогательных элементов трудно управлять горизонтальным положением внешнего блока;
  • Не все любят display: table-cell.

IE6-7: способ expression

Т.к. прошлый метод не действует в IE6-7, то надо найти решение этой проблемы.

Expression — короткие участки JS кода, умещающиеся в файл стилей, работают единственный раз и работают исключительно в IE. Expression обычно не имеют смысла. Приращиваем к прошлому примеру в файлы стилей для IE6-7 следующий фрагмент кода:

.wrapper p {
z-index: expression(
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2) &lt; 0
? style.marginTop=»0″ : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +’px’
);
}

Выявлять плюсы и минусы — бессмысленно, т.к. плюсы отсутствуют, кроме того, что данный метод является дополнением к первому в IE6-7, но эти браузеры давно не используются, так как устарели морально, на них дупустимо смело закрыть глаза.

ЕЩЕ:  Полезная информация о бесплатной внешней оптимизации сайта

line-height

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

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ line-height</title>
<style>
.wrapper {
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class=»wrapper»>
Вертикально выравненная строка
</div>
</body>
</html>

Достоинства способа:

  • Легкость;
  • Работа с любым браузером.

Отрицательные моменты способа:

  • Используется исключительно для однострочных элементов;
  • Дает возможность выравнивания исключительно центровкой.

position и отрицательный margin вверх

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

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ line-height</title>
<style>
.wrapper {
position: relative;
height: 400px;
}
.wrapper p {
height: 200px;
margin: -100px 0 0;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div class=»wrapper»>
<p>Я выровнен по вертикали</p>
</div>
</body>
</html>

Достоинства:

  • Работа с любым браузером;
  • Выравнивать элементы допустимо не только центровкой, но и в произвольном направлении.

Недостатки:

  • Велики трудозатраты при большой массе элементов;
  • Трудности в управлении;
  • Требуется выявить и зафиксировать высоту элемента;
  • В некоторых типах браузеров абсолютное позиционирование ведет к падению производительности.

Выводы по основным способам

Очевидно, эти способы не универсальны – любой из них имеет хоть и малыми, но все же — недостатками. Самым лучшим является способ display: table-cell, но он мне лично вреда не внушал уважения, также мы чрезвычайно много времени не уходили от поддержки устаревших IE6-7. Следовательно, есть нужда проработать нечто более универсальное и подходящее. Изучим.

Выравнивание с применением vertical-align

Общеизвестно, свойство vertical-align не действует на блочные элементы, следовательно, использовать это свойства бессмысленно. Но, это свойство великолепно действует для inline и inline-block элементов. Если мы осуществим попытку использовать это свойство для внутренних элементов внутри блочного элемента, то мы увидим такую ситуацию:

ЕЩЕ:  Инструменты по работе с семантическим ядром в помощь SEO-специалисту

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ vertical-align</title>
<style>
.wrapper
{
width:600px;
height:100px;
padding:30px; /* Добавлено для наглядности */
margin:0 auto;
background:#dfdfdf;
font-family:Arial, Helvetica, sans-serif;
}
.el1 { vertical-align:middle; font-size:28px; }
.el2 { vertical-align:top; font-size:14px; }
.el3 { vertical-align:middle; font-size:18px; }
.el4 { vertical-align:middle; font-size:36px; }
.el5 { vertical-align:bottom; font-size:12px; }
</style>
</head>
<body>
<div class=»wrapper»>
<span class=»el1″>Элемент 1</span>
<span class=»el2″>Элемент 2</span>
<span class=»el3″>Элемент 3</span>
<span class=»el4″>Элемент 4</span>
<span class=»el5″>Элемент 5</span>
</div>
</body>
</html>

Убедились, что элементы выравниваются относительно строки, а не всего блока, это является неподходящим под наши нужды. Попробуем теперь внутрь блока поставить дополнительно элемент (т.к. для inline элемента высоту установить невозможно, то элемент обязан быть inline-block) с высотой равной высоте внешнего блока. Допишем (на картинке ниже представлен серой линией) и видим:

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ vertical-align</title>
<style>
.wrapper
{
width:600px;
height:100px;
padding:30px; /* Добавлено для наглядности */
margin:0 auto;
background:#dfdfdf;
font-family:Arial, Helvetica, sans-serif;
}
.el1 { vertical-align:middle; font-size:28px; }
.el2 { vertical-align:top; font-size:14px; }
.el3 { vertical-align:middle; font-size:18px; }
.el4 { vertical-align:middle; font-size:36px; }
.el5 { vertical-align:bottom; font-size:12px; }
.spanvmiddle
{
display:inline-block;
height:100%;
width:0px;
overflow:hidden;
vertical-align:middle;
border-right:1px solid #ccc;
}
</style>
</head>
<body>
<div class=»wrapper»>
<span class=»el1″>Элемент 1</span>
<span class=»el2″>Элемент 2</span>
<span class=»el3″>Элемент 3</span>
<span class=»el4″>Элемент 4</span>
<span class=»el5″>Элемент 5</span>
<span class=»spanvmiddle»></span>
</div>
</body>
</html>

Определим всем элементам vertical-align:middle.

Почти успех, одну строку мы таким подходом выровняли по центру. Предположим, их несколько. Опять, никаких трудностей. Необходимо только текстовым элементам указать display:inline-block:

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ vertical-align</title>
<style>
.wrapper
{
width:600px;
height:100px;
padding:30px; /* Добавлено для наглядности */
margin:0 auto;
background:#dfdfdf;
font-family:Arial, Helvetica, sans-serif;
}
.wrapper span { display:inline-block; }
.el1 { vertical-align:middle; font-size:28px; }
.el2 { vertical-align:middle; font-size:11px; }
.el3 { vertical-align:middle; font-size:18px; }
.el4 { vertical-align:middle; font-size:32px; }
.el5 { vertical-align:middle; font-size:11px; }
.spanvmiddle
{
display:inline-block;
height:100%;
width:0px;
overflow:hidden;
vertical-align:middle;
border-right:1px solid #ccc;
}
</style>
</head>
<body>
<div class=»wrapper»>
<span class=»el1″>Элемент 1</span>
<span class=»el2″>Элемент с двумя <br> строками текста</span>
<span class=»el3″>Элемент 3</span>
<span class=»el4″>Элемент 4</span>
<span class=»el5″>Элемент <br> с тремя <br> строками текста</span>
<span class=»spanvmiddle»></span>
</div>
</body>
</html>

Если нам не важна совместимость со старыми версиями IE, то элемент <span class=»spanvmiddle»></span> мы можем удалить, а его стили заменить на:

.wrapper:after
{
content:»»;
display:inline-block;
height:100%;
width:0px;
overflow:hidden;
vertical-align:middle;
}

Остановимся на важных нюансах:

  • К элементам, которые выравниваются, невозможно как-ли применять свойство float.
  • Между inline-block элементами по соседству постоянно имеется дистанция, следовательно, если их требуется приблизить друг к другу, то для внешнего блока потребуется указать font-size:0px; а у самих элементов оставить прежнее значение или указав требуемое.
  • Для внутренних элементов этим способом допустимо указывать как равные значения (top, bottom или middle), так и иные.
ЕЩЕ:  Использование программы Кей Коллектор

Достоинства способа:

  • Легкость;
  • Работа с любым типом браузера;
  • Выравнивать элементы возможно, как по центру, так и в ином направлении;
  • Может применяться как для единственной строки, так и для большего количества. Т.к. элемент обладает display:inline-block, он имеет возможность вмещать текст, графику (фон, картинка) и иные элементы.

Недостатки способа:

  • Требуется внедрять еще один элемент;

При применениее псевдоэлемента :after, возможна потеря корректности работы с устаревшими версиями IE.

Смотрите так же на нашем сайте:
Какие сложности возникают в процессе линкбилдинга?
Устарел или не работает Adobe Flash Player
Advodka – незаменимый инструмент в продвижении сайта
Как продвинуть сайт самостоятельно и улучшить внутреннюю оптимизацию

Как сделать вертикальное выравнивание внутри блочного элемента: 1 комментарий

  1. Артем Попов

    На мой скромный взгляд, кропотливая работа с позиционированием элементов страницы делает сайт более опрятным.

    Ответить ↓

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *