Vertical-align

Vertical-align CSS

Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline, inline-block или table-cell. Оно принимает в качестве значений число, проценты или ключевое слово.

Длина и проценты выравнивают базовую линию элемента на соответствующем расстоянии от базовой линии родительского элемента.

Ключевые значения vertical-align могут быть следующими:

• baseline;
• sub;
• super;
• text-top;
• text-bottom;
• middle;
• top;
• bottom.

Большинство из них не требует дополнительного объяснения. Стоит отметить только sub и super, которые отображают элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.

Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align. У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

<div class="grid"> 
  <img src="http://placebacn.com/200/400"> 
  <h2>grilled bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/300"> 
  <h2>tasty bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/200"> 
  <h2>crispy bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/350"> 
  <h2>bacon</h2> 
</div>

Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom. Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float. Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

Свойство position определяет, как элемент позиционируется на странице и будет ли он отображаться в обычном потоке документа. Оно применяется в сочетании со свойствами смещения блока — top, right, bottom и left, которые точно определяют, где элемент будет расположен путём перемещения элемента в разных направлениях.

По умолчанию у каждого элемента значение position установлено как static, это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute, которые мы рассмотрим дальше.

Относительное позиционирование

Значение relative для свойства position позволяет элементам отображаться в обычном потоке страницы, резервируя место для элемента как предполагалось и не позволяя другим элементам его обтекать. Однако, оно также позволяет модифицировать положение элемента с помощью свойств смещения. К примеру, рассмотрим следующие HTML и CSS:

HTML

CSS

Демонстрация относительного позиционирования

Здесь для второго элемента <div> с классом offset задано значение position как relative, а также два свойства смещения — left и top. Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей

Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

Когда мы позиционируем элемент с помощью свойств смещения, элемент перекрывает элемент под ним, а не сдвигает его вниз, как это делают свойства margin или padding.

Абсолютное позиционирование

Значение absolute для свойства position отличается от значения relative тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.

Кроме того, абсолютно позиционируемые элементы перемещаются относительно их ближайшего относительно позиционированного родительского элемента. Если относительно позиционированного родителя не существует, то абсолютно позиционированный элемент будет позиционироваться относительно элемента <body>. Это небольшая часть информации; давайте взглянем на то, как это работает внутри некоторого кода:

HTML

CSS

Демонстрация абсолютного позиционирования

В этом примере элемент <section> позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент <div> с классом offset включает значение position как absolute. Поскольку элемент <section> является ближайшим относительно позиционированным родительским элементом для <div>, то элемент <div> будет позиционироваться относительно элемента <section>.

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

В результате свойств right и top, элемент <div> появится в 20 пикселях справа и 20 пикселях сверху внутри <section>.

Поскольку элемент <div> позиционируются абсолютно, он не располагается в обычном потоке страницы и будет перекрывать любые окружающие его элементы. Кроме того, исходное положение <div> не сохраняется и другие элементы могут занять это место. Как правило, большая часть позиционирования может происходить без применения свойств position и свойств смещения, но в некоторых случаях они могут оказаться чрезвычайно полезны.

Выравнивание по вертикали в div-контейнере

Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align. Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

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

Пусть у нас есть div класса textalign:

<div class=»textalign»>Содержимое блока</div>

Для данного блока указываем следующее 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.

Values

For each of the following values, we will apply it to an inline image inside a line box of a list item. The line box in each of the images has a dotted gray border. The line which is used to align the images for each value is red.

baseline

This is the default value. It aligns the baseline of the element with the baseline of the line box. If the element does not have a baseline, it aligns the bottom margin edge with the line’s baseline.An image aligned to the baseline of the line box, sitting next to the text in the line. This is the default vertical alignment.

middle

Aligns the vertical midpoint of the element with the baseline of the line plus half the x-height of the line (determined by the font).The vertical midpoint of the image is aligned with the line that is half the x-height of the line above the baseline.

This is one of the most commonly used value for the property, and is usually used to align icons and list markers with the text in line.

sub

Lowers the baseline of the element to the proper position for subscripts on the line. (This value has no effect on the font size of the element’s text.)An image’s bottom edge is lowered so that it is aligned with the baseline of the subscript.

super

Raises the baseline of the element to the proper position for superscripts on the line. (This value has no effect on the font size of the element’s text.)An image’s bottom edge is lifted so that it is aligned with the baseline of the superscript.

text-top

Aligns the top of the element with the top of the line’s content area. The height of the content area is just high enough for the maximum ascenders and descenders of all the fonts in the line, and the alignment line is the top of that height. Note that the height may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.The image is aligned with the line just above the ascenders of the font. If more than one font is used, this line will be just above the highest ascender of all the fonts.

text-bottom

Aligns the bottom of the element with the bottom of the line’s content area. The height of the content area is just high enough for the maximum descenders and ascenders of all the fonts in the line, and the alignment line is the bottom of that height. Note that the height may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.The image is aligned with the line just below the descenders of the font. If more than one font is used, this line will be just below the lowest descender of all the fonts.

top

Aligns the top of the element with the top of the entire line. This means that if there are other elements on the line each with different heights, like multiple images, for example, the top of the line will be as high as the highest of the two images.An image aligned to the top of the line box. The top is specified by the highest element on the line which, in this case, is the second image.

If the line has an explicitly set that is higher than the highest content on the line, the top of the line box will then be determined by that height.

An image aligned to the top of the line box that has an explicit line-height specified that is greater than the height of all of its content.

bottom

Aligns the element to the bottom of the entire line.

If the line has an explicitly set that is lower than the lowest content on the line, the bottom of the line box will then be determined by that height.

The image is aligned to the bottom of the entire line box. The line has a specified which stretches the bottom of the line downwards, and the image is aligned with that bottom.

<percentage>

Raise the element above the baseline (if the percentage value is positive), or lower the element below the baseline (if the percentage value is negative) by the specified amount. The amount specified is a percentage of the value. The value means the same as .The image is aligned using a 50% value. The specified is 100px, so the image is lifted up by 50px above the baseline.

<length>

Raise the element above the baseline (if the length value is positive), or lower the element below the baseline (if the length value is negative) by the specified amount. A value ‘0’ means the same as .The image is raised from the baseline by a specified amount.

Notes

The values , , and behave as expected when applied to table-cell elements. However, other values may have unexpected behavior in some browsers. Chris Coyier says it best:

Значения свойства – ключевые слова

Свойство vertical-align может принимать следующие значения:

• baseline (значение по умолчанию)
• bottom
• middle
• sub
• super
• text-bottom
• text-top
• top

Большинство из них вам скорее всего не понадобятся, но всегда хорошо знать из чего можно выбрать. Например, на , текстовому полю назначено свойство vertical-align: top, благодаря чему, оно выровнено относительно самого высокого элемента в строке (большой картинки).

А если вы не хотите располагать элемент относительно изображений или других строчных элементов, можно использовать значения text-top или text-bottom, чтобы ваш элемент позиционировался относительно текста, расположенного в строке.

Немного подшаманим

Перво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:

<!-->

   <style type="text/css">
      .textalign div{
          position: absolute;
          top: 50%;
      }

      .textalign span{
        position: relative;
        top: -50%;
      }
    </style>

<!-->

Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.

Решение проблемы: нужно добавить свойство overflow: hidden блоку textalign.

Детально познакомиться со свойством overflow можно в видеоуроке по работе с блоками div.

Окончательный вид CSS-инструкций для блока textalign имеет вид:

.textalign{
    display: table-cell;
    vertical-align: middle;
    width:500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

При желании, вы можете посмотреть HTML и CSS пример всего вышесказанного.

Прошу пардону, забыл упомянуть один важный момент. Если вы будите пытаться задавать высоту блока класса textalign в процентном соотношении, то у вас ничего не выйдет.

Центровка с помощью calc

В некоторых случаях, данный способ более универсален чем использование 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%); }

Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

Property Values

Value	Description	Play it
baseline	The element is aligned with the baseline of the parent. This is default	Play it »
length	Raises or lower an element by the specified length. Negative values are allowed. Read about length units	Play it »
%	Raises or lower an element in a percent of the «line-height» property. Negative values are allowed	Play it »
sub	The element is aligned with the subscript baseline of the parent	Play it »
super	The element is aligned with the superscript baseline of the parent	Play it »
top	The element is aligned with the top of the tallest element on the line	Play it »
text-top	The element is aligned with the top of the parent element’s font	Play it »
middle	The element is placed in the middle of the parent element	Play it »
bottom	The element is aligned with the lowest element on the line	Play it »
text-bottom	The element is aligned with the bottom of the parent element’s font	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Условный комментарий

Конструкция вида:

<!-->
...
Инструкции, действующие только в случае выполнения условия в квадратных скобках
...
<!-->

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

Инструкции, содержащиеся в подобном условном комментарии будут выполнены только в случае, если браузер, интерпретирующий данный код, принадлежит к семейству IE.

Вы можете более подробно познакомится с условными комментариями.

Таким образом, используя условный комментарий, мы сможем спрятать кусок кода от всех браузеров кроме IE.

Запомнили, пошли дальше.

Чего оно не делаетСкопировать ссылку

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

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

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

Но работает не так.

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

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

Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

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

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

Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Вертикальное выравнивание строчных элементов

Предположим есть у вас строка текст, которая разбита строчными тегами <span> на части:

<span id="perviy">Вас</span> <span id="vtoroy">приветствует</span> <span id="tretiy">кусок</span> текста!

Для контейнеров <span> применим следующие свойства CSS:

#perviy{
    vertical-align:sub;
}

#vtoroy{
    vertical-align:3px;
}

#tretiy{
    vertical-align:-3px;
}

В результате строка текста будет иметь вот такой вид:

Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.

Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.

Центровка с помощью вида отображения flex

Наверное самый простой вариант.

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

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) < 0
      ?  style.marginTop="0" :  style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px'
   );
}

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

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Line-height

С помощью этого свойства также можно выравнивать элементы по вертикали

Важно, чтобы в инлайн-блоке было не больше одной строчки текста. Это основной недостаток метода

Если эти правила соблюдены, необходимо приравнять line-height к высоте внешнего дива.
Поскольку нельзя допускать, чтобы образовывалось больше одной строчки, рекомендуется добавить к коду правила white-space: nowrap и overflow: hidden.
Код будет выглядеть следующим образом.

#out {
    height: 200px;
    line-height: 200px;
}

#in {
    white-space: nowrap;
    overflow: hidden;
}

Еще один недостаток этого способа исправить проблему – необходимость знать высоту внешнего блока.