Css vertical-align property

Горизонтальное выравнивание

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align». При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац — ведь суть не с нем, а суть в выравнивании.

.example-text{
text-align: center;
padding: 10px;
background: #FF90B8;
}

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3{
text-align: center;
background: #FF90B8;
}

.inline-text{
display: inline-block;
width: 40%;
padding: 10px;
text-align: left;
background: #FFE5E5;
}

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper{
height: 200px;
background: #F1BF88;
}

.lama1{
height: 200px;
width: 200px;
background: url(lama.jpg);
margin: 0 auto;
}

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

Как выровнять текст по центру при помощи CSS?

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

• text-align: center; — для выравнивания по центру
• text-align: left; — по левой стороне
• text-align: right; — по правой стороне
• text-align: justify; — по ширине блока или страницы.

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

1. 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

   PHP

   <div class=”block-text”>Здесь текст</div>

   1	<div class=”block-text”>Здесьтекст<div>

   А затем в CSS файле вашего сайта пишем:

   PHP

   .block-text {
   text-align: center;
   }

   1 2 3

   .block-text{ text-aligncenter; }

   Вместо block-text может быть любое другое название класса.

   Также можно не присваивать новый класс, а использовать уже существующий. В этой статье с видео инструкцией я показывала как определить класс или идентификатор элемента на сайте: “Как определить ID и класс элемента на странице?”

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

   PHP

   .block p {
   text-align: center;
   }

   1 2 3

   .blockp{ text-aligncenter; }

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

   , которые находятся внутри тега с классом block:

   PHP

   <div class=”block”>
   <p>Первый абзац</p>
   <p>Второй абзац</p>
   ….
   </div>

   1 2 3 4 5

   <div class=”block”> <p>Первыйабзац<p> <p>Второйабзац<p> …. <div>

   Для выравнивания заголовков внутри блока с классом block запись будет немного другая:

   PHP

   .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 {
   text-align: center;
   }

   1 2 3

   .block h1,.block h2,.block h3,.block h4,.block h5,.block h6{ text-aligncenter; }

   Так же вы можете задать эти CSS свойства в HTML коде страницы или подключить свой отдельный CSS файл. Как это сделать написано в этой статье:«Как css подключить к html?»

2. 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:

   PHP

   <p style=” text-align: center;”>Пример текста</p>

   1	<pstyle=”text-aligncenter;”>Примертекста<p>

   Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.

Описанные выше способы помогут вам выровнять по центру текст. Так же вам могут понадобиться вот эти материалы:«Как выровнять текст или блок по вертикали в CSS?»«Выравнивание картинки по центру HTML и CSS»

С уважением Юлия Гусарь

Использование flexbox для горизонтального и вертикального центрирования элементов

Способ 1. Сочетание свойств и

Свойства Flexbox-модели позволяют выровнять элемент не только по горизонтали, но и по вертикали. Для этого нужно использовать всего 3 свойства для родительского элемента: , и . Для того чтобы было видно, как сработало последнее свойство, необходимо также добавить высоту родительскоиу элементу (в примере — ). Если у вас внутрь flex-контейнера вложен не один, а несколько элементов, то для того, чтобы они расположились друг под другом, нужно еще добавить свойство .

Использование свойств Flexbox-модели для горизонтального и вертикального центрирования элемента

<style>
.test-flex{
height: 320px;
display: flex;
justify-content: center;
align-items: center
}
figure {border: 2px dotted #a9a9a9;}
figcaption {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
</style>
<div class=»test-flex»>
<figure>
<img src=»images/cube.jpg» alt=»Центрирование flex» width=»300″ height=»200″ style=»margin: 0″ />
<figcaption>3D Cube</figcaption>
</figure>
</div>

Пример вживую:

3D Cube

Способ 1а: display: inline-flex для небольших элементов

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

See the Pen inline-flex centering by Elen (@ambassador) on CodePen.dark

Способ 2: используем display: flex для родителя и margin: auto для дочернего элемента

Очень простой способ, который предполагает наличие одного дочернего элемента внутри flex-контейнера. CSS-стили лаконичны:

Один дочерний flex-элемент с margin: auto внутри flex-контейнера

CSS

.parent {
height: 400px;
display: flex;
}
.child{
margin: auto;
}

В примере ниже такой вариант применен для размещения текста по центру header-a для html-страницы.

See the Pen WNGKWNQ by Elen (@ambassador) on CodePen.dark

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

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

Доступные значения этого правила  определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

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

Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

• baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
• sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
• super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
• top — выравнивание фрагмента текста по верхнему краю родительского элемента;
• text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
• middle — выравнивание центра фрагмента текста по центру родительского элемента;
• bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
• text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

 Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что  и  запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

• top — для выравнивания содержимого по верхней границе ячейки;
• bottom — для выравнивания содержимого по нижней границе ячейки;
• middle — для выравнивания по центру ячейки (используется по умолчанию).

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

Line-height

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

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

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

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

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

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

Мы хотим центрировать контент, а не сам div!

У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height. Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.

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

Взгляните на приведенный ниже пример.

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

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

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

Trivia & Notes

As mentioned above, the property is used to align inline-level ( and ) elements and table-cell elements only. So using it on a block-level element will not give you any results, unless you give that block-level element a table-cell display and then apply the property to it.

Many beginners tend to use the property in an attempt to vertically center elements such as paragraphs of text (which are block-level elements) or other block-level elements such as headings or s inside other block-level containers. When they do this, they never end up with the intended result. Plus, the browser will set all the inline-level descendants of the block-level element to inherit the vertical alignment they have set on the element.

Sometimes content can be centered vertically inside a block-level element if that element is displayed as a table-cell. However, it may not always be convenient to do that—maybe your block-level element has to be displayed as is or your layout might get messed up. Plus, as we mentioned earlier, using on an element with will align the content inside that element, and not the element itself inside its parent container.

Vertically aligning block-level elements has been one of the holy grails of CSS, since there is no standard way to do this. Many articles have been written showcasing techniques to center block-level elements vertically. You can read about the different techniques in the following recommended articles: