Вертикальное выравнивание блоков в css

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Использование таблицы для выравнивания текста по вертикали в CSS

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


<table id="outwrap">
    <td id="out">
        <div id="in"></div>
    </td>
</table>

Недостатков у такого подхода два:

  1. Неправильно с позиции семантики применять таблицы для этой цели.
  2. Необходимо создать лишний элемент.

Исправить первый недостаток можно, изменив теги table и td на div и использовать режим отображения «table» и «table-cell» соответственно.

#outwrap {
    display: table;
}

#out {
    display: table-cell;
}

Но вот второй недостаток все равно останется. Код будет немного тяжеловат, особенно если таких элементов много.

Значения свойства для ячеек таблицы

Значение Описание
top Выравнивает содержимое относительно верхнего края ячейки.
middle Выравнивает содержимое относительно середины ячейки.
bottom Выравнивает содержимое относительно нижнего края ячейки.
baseline (sub, super, text-top, text-bottom, величина, и %) Базовой линией ячейки таблицы является базовая линия первой текстовой строки в ячейке. Если в ячейке нет никакой текстовой строки, то базовой линией является нижний край элемента, расположенного внутри ячейки. Базовая линия, имеющая максимальную дистанцию до верхнего края ячейки таблицы, является базовой линией для всей строки. Значение baseline используется для выравнивания содержимого нескольких ячеек (для которых установлено выравнивание по базовой линии) по одной базовой линии в строке.

Пример

CSS Свойство:

vertical-align: Результат:

Демонстрация свойства vertical-aligns.

CSS Код: span#mySpan { background-color: yellow; vertical-align: baseline; } Кликните на любое значение свойства, чтобы увидеть результат

Лишний элемент

Мы уже отметили, что свойство vertical-align выравнивает строчные элементы относительно друг друга в одном контейнере. Этим можно воспользоваться, если мы сможем найти где-нибудь хотя бы еще один строчно-блочный элемент. Впрочем, мы ведь можем сами его создать. И для этого даже не нужно засорять разметку, воспользуемся псевдоэлементом.

CSS

.parent:before{ display:inline-block; height:100%; vertical-align:middle; content:»»; } .child{ display:inline-block; vertical-align:middle; }

1 2 3 4 5 6 7 8 9 10 11 12

.parent:before{

displayinline-block;

height100%;

vertical-alignmiddle;

content»»;

}

.child{

displayinline-block;

vertical-alignmiddle;

}  

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

Big Alert

Important note #1: Twitter Bootstrap doesn’t specify the of columns in extra small devices unless you give one of classes to the columns.

Therefore in this particular demo, I have used classes in order for columns to be displayed properly in mobile mode, because it specifies the of the column explicitly.

But alternatively you could switch off the Flexbox layout simply by changing to in specific screen sizes. For instance:

Or you could specify only on specific screen sizes like so:

In that case, I’d go with @KevinNelson’s approach.

Important note #2: Vendor prefixes omitted due to brevity. Flexbox syntax has been changed during the time. The new written syntax won’t work on older versions of web browsers (but not that old as Internet Explorer 9! Flexbox is supported on Internet Explorer 10 and later).

This means you should also use vendor-prefixed properties like and so on in production mode.

If you click on «Toggle Compiled View» in the Demo, you’ll see the prefixed version of CSS declarations (thanks to Autoprefixer).

Full-height columns with vertical aligned contents

As you see in the previous demo, columns (the flex items) are no longer as high as their container (the flex container box. i.e. the element).


This is because of using value for property. The default value is so that the items can fill the entire height of the parent element.

In order to fix that, you can add to the columns as well:

EXAMPLE HERE (Again, mind the comments)

The Output

Colored area displays the padding-box of columns.

Last, but not least, notice that the demos and code snippets here are meant to give you a different idea, to provide a modern approach to achieve the goal. Please mind the «Big Alert» section if you are going to use this approach in real world websites or applications.

For further reading including browser support, these resources would be useful:

  • Mozilla Developer Network — Flexible boxes
  • Guide To Flexbox — CSS Tricks
  • HTML5Rocks — Flexbox quick
  • SmashingMagazine — Centering Elements with Flexbox
  • Philip Walton — Solved By Flexbox

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
middle
sub
super
text-top
text-bottom
top
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.

<percentage>
<length>

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:

CSS — Выравнивание блока по центру

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>  

CSS-код:

.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+

Значения

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

Baseline (базовая линия)

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

Базовая линия для строчных элементов

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


Базовая линия для ячеек таблицы

Sub

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

Значение для строчных элементов

Для табличных элементов это значение приводит к такому же результату, как и .

Super

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

Значение для строчных элементов

Для табличных элементов это значение приводит к такому же результату, как и .

Text-top

Значение для строчных элементов выравнивает верхнюю границу текущего элемента по верхней линии шрифта родительского элемента.

Значение для строчных элементов

Для табличных элементов это значение приводит к такому же результату, как и .

Text-bottom

Значение для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе шрифта родительского элемента.

Значение для строчных элементов

Для табличных элементов это значение приводит к такому же результату, как и .

Middle

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

Значение для строчных элементов

Для табличных элементов это значение выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box).


Значение для ячеек таблицы

Top

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

Значение для строчных элементов

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

Значение для ячеек таблицы

Bottom

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

Значение для строчных элементов

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

Значение для ячеек таблицы

Расстояние

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

Смещение базовой линии с помощью указания расстояния

Для табличных элементов это значение приводит к такому же результату, как и .

Проценты

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

Смещение базовой линии с помощью указания процентов

Для табличных элементов это значение приводит к такому же результату, как и .


С этим читают