6 методов вертикального центрирования с помощью css

Параметры тени у текста — свойство text-shadow

 Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web  страницу. Синтаксис:

Значение none отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.

Горизонтальное смещение тени можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет располагаться правее текста, при отрицательном — левее. Нулевое значение расположит тень прямо под текстом и  имеет смысл только если задано размытие  тени.

Вертикальное смещение тени тоже можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет смещаться ниже текста, при отрицательном — выше. Нулевое значение расположит тень прямо под текстом.

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

Рассмотрим пример:

И вот так будет выглядеть текст абзаца p  с применением данного правила стиля в Internet Explorer 11:

Выравнивание содержимого по перекрёстной оси — свойство align-content

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство  для управления свободным пространством между строками. В спецификации это описано как .

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

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

• (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение  установлено в , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения  для понимания принципа их работы.

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

Замечание: значение  не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по на MDN приведено больше деталей о всех значениях и поддержке браузерами.

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

Использование свойства может быть разбито на три простых для понимания правила:

1. Оно применяется только к строчным элементам или строчным блокам .
2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

Почему? Потому что  — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение даст желаемый эффект.

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

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

Additional Resources

In the sections above I linked to articles specific to each method. Below are some resources that cover more than a single method for centering.

• Vertical Centering With CSS — covers all the methods above except for the padding method
• Two Simple Ways to Vertically Align with CSS — Covers absolute positioning and negative margins and the line height methods
• Vertical centering using CSS — Covers all methods except the floater div method and adds a few more.
• CSS tests and experiments — Contains a variety of css experiments. Search the page for the word vertical and you’ll find several vertical centering experiments, including the 2 links below.
• Centering (horizontally and vertically) an image in a box
• Shrink-wrap and Center

Свойство position

Начнем с основ выравнивания по вертикали CSS div:

• position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
• position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
• position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

Property Values

Центрирование по вертикали

В примере, приведенном ниже, у нас есть div с чёрным фоном и рамкой. Внутри него находится блок поменьше с нужной нам шириной и высотой:

<div class="container"> 
  <div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
  aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt
  dolores, consequatur dolorem, dignissimos debitis distinctio.
  Voluptas eligendi fuga voluptatem eos. 
  </div>
</div>

Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру.

Применив к контейнеру свойство position: relative, можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

.container {
  position: relative;
  background: #444;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 400px;
  height: 200px;
  margin: -100px 0 0 -200px;

  color: #fff;
  background: #cc3f85;
}

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

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

Альтернативные методы

Word-break

Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.

• normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега <br>;
• break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
• keep-all: действует как normal, но для китайского, японского и корейского языков слова не переносятся;
• break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.

В отличие от text-orientation, свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer.

Создание вертикального текста с помощью свойства word-break

Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.

<div class="block"> <p>Образец текста</p> </div>

.block {     
     margin: auto;     
     color: #fff;     
     background: #000;     
     width: 0;      
     padding: 0 10px;      
     word-break: break-all;
}

Word-wrap/overflow-wrap

Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap, альтернативное свойство overflow-wrap пока только частично воспринимается IE.

• normal: перенос строк осуществляется при явном указании, например с помощью тега <br>;
• break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
• initial: устанавливает значение по умолчанию;
• inherit: передает значение свойства от родительского элемента дочернему.

Создание вертикального текста свойством word-wrap

Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break. Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.

Тег br

Самый примитивный метод достижения вертикальной ориентации текста — использование тегов <br>. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.

Обертывание в тег span

Еще один популярный метод — обернуть каждую букву  текста в тег span и с помощью CSS назначить им display: block. Как и использование тега <br>, этот способ не очень удобен для больших текстовых строк.

Использование JavaScript

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

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

1. Сделайте контейнер относительно позиционированным
   (position: relative), что превратит его в контейнер для абсолютно
   позиционированных элементов.

2. Сам элемент сделайте абсолютно позиционированным
   (position: absolute).

3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
   (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

4. Используйте translate, чтобы переместить элемент вверх на
   половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
   указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

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

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

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

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

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

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

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

Использование таблицы для выравнивания текста по вертикали в 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;
}

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

flexbox CSS

Flexbox — современный и очень гибкий способ расположения элементов на странице, который позволяет с легкостью создавать красивые интерфейсы, не засоряя код лишней разметкой и стилями. Я очень рекомендую вам им овладеть. В ближайших постах обязательно расскажу о нем подробнее.

Ну а пока вернемся к выравниванию по центру. 

Теперь давайте разберемся, что все это значит.

display: flex

При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.

justify-content: center

Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство ). Ось может быть либо горизонтальной ( или ), либо вертикальной ( или ). По умолчанию используется значение , т.е. наши элементы располагаются по горизонтальной оси слева направо.

align-items: center

Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство описывает, как элементы контейнера расположены относительно нее.

Вот примерно то, что должно получиться.

Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько — просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!

Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно .

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

Пример

CSS Свойство:

vertical-align:

Результат:

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

CSS Код:

span#mySpan { background-color: yellow; vertical-align: baseline; }

Кликните на любое значение свойства, чтобы увидеть результат

Выравнивание и гибкое-направление

Начальное положение элементов поменяется, если вы измените значение свойства  — например установите  вместо .

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

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство , элементы контейнера выстраиваются в режиме записи вашего языка ( или ). 

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

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

CSS Table Method

Above I mentioned that vertical-align applies to table cells which leads us to this method. We’ll display our elements as table and table cell and then use the vertical-align property to center the content.

Note: CSS tables are not the same as html tables.

css

#parent {display table;}

#child {

    display table-cell;

    vertical-align middle;

}

We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.

Unlike the method above the content can be dynamic as the div will grow with what’s placed inside. The downside of this method is it doesn’t work in older versions of IE, though there is a fix, which is to add display: inline-block to the child element.

#child {

    display inline-block;

}

• Flexible height vertical centering with CSS, beyond IE7
• CSS Vertical Centering

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

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

Пример использования:

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

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

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.

Свойство vertical-align

Это встроенный стандартный метод выравнивания, который может использоваться для строчных элементов и таблиц.
Он может набирать разных значений. Первое из них – baseline. Выравнивание осуществляется по базовой линии родительского элемента.

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

Второе значение – sub. Его ориентир – нижняя базовая линия родительского элемента. Например, так.

Противоположное sub выравнивание super. Ориентиром служит верхняя базовая линия родительского элемента.

Оба эти значения в таблицах аналогичны baseline.
Совершенно другая ситуация с выравниванием middle. Это значение css позволяет выровнять текст по центру. Здесь ориентиром служит середина родительского элемента. Вычисляется она очень просто: берется его размер по вертикали и делится пополам. Через центр проводится линия, по которой и выравнивается элемент.
В случае с таблицами элемент выравнивается по середине ячейки без границ.

Еще одна пара значений – top-bottom. Они выравнивают элемент по верхней и нижней линии строки соответственно. Ну или ячейки, если речь идет о таблице.
Также можно указывать размещение элемента по горизонтали в процентах или непосредственном значении в единицах, поддерживаемых CSS (пикселях, сантиментрах, em и так далее). В этом случае браузер ориентируется на базовую линию родительского элемента. В таблицах код себя ведет так же, как если верстальщик укажет baseline в качестве значения.

Floater Div

This last method requires an empty div which is floated and used to control where our child element sits in the document flow. Notice the floater div comes before our child div in the html below.

css

#parent {height 250px;}

#floater {

    float left;

    height 50%;

    width 100%;

    margin-bottom -50px;

}

#child {

    clear both;

    height 100px;

}

We float the empty div to the left (or right) and give it a height of 50% of the parent div. That causes it to fill up the entire upper half of the parent element.

Because this div is floated it’s removed from the normal document flow so we need to clear the child element. Here I’ve used clear: both, but you just need to clear in the same direction you floated the empty floater div.

The top edge of the child div should now be immediately below the bottom edge of the floater div. We need to bring the child element up by an amount equal to half its height and to do so we set a negative margin-bottom on the floater div.

This method also works across browsers. The downside is that it requires an empty div and that you know the height of the child element.

How To Center Content Vertically Using CSS

Свойство writing-mode

Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:

1. horizontal-tb;
2. vertical-lr;
3. vertical-rl.

Использование writing-mode предусматривает наличие двух ключевых понятий:

• Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
• Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).

Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl), а для text-orientation — upright.

<div class="block">
     <p class="horizontal-tb">Образец текста</p>
     <p class="vertical-rl">Образец текста</p>      
     <p class="vertical-lr">Образец текста</p>
</div>

.block {     
     display: flex;     
     justify-content: center;     
     align-items: center;     
     text-align: center;     
     margin: auto;     
     font-size: 2rem;     
     color: #fff;     
     background: #000; 
} 

.horizontal-tb {    
     writing-mode: horizontal-tb; 
} 

.vertical-rl {     
     writing-mode: vertical-rl; 
} 

.vertical-lr {     
     writing-mode: vertical-lr; 
}

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

Свойство для вертикального выравнивания vertical-align

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

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

CSS

.text-vertical-al{
display:table;
}
.text-vertical-al p{
display:table-cell!important;
vertical-align:middle;
}

В результате у нас все заработало:

Выравнивание текста по вертикали CSS

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

Допустим вам нужно выровнять текст по вертикали для всей таблицы. В этом случае в файле CSS для класса table нужно написать следующее:

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

В этом случае во всех ячейках текст будет выровнен по вертикали по центру:

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

Вот что получится: