Как выровнять текст или блок div по вертикали | CSS

padding или margin

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

какой-то текст
<style>
.vyrovnyat {
  background: #fff5d7;
  padding: 3em 0;
  text-align: center; /* выровнять текст и картинки по горизонтали */
}
</style>

<div class="vyrovnyat"> какой-то текст </div>

line-height = height

Если высоту строки (свойство line-height) сделать равной высоте блока (свойство height), то вложенный элемент разместиться по центру.

выровнять однострочный текст по вертикали
<style>
.vyrovnyat {
  background: #fff5d7;
  overflow: hidden; /* всё, что выходит за рамки блока обрезается */
  white-space: nowrap; /* блок может содержать не более одной строки */
  text-align: center;
  height: 7em;  /* не в % */
  line-height: 7em; /* не поддерживается Opera Mini [opera.com] */
}
</style>

<div class="vyrovnyat"> выровнять однострочный текст по вертикали </div>

Может быть применён не только для единственной строки (см. код).

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

Какой-то текст смайлик какой-то текст
<style>
.vyrovnyat {
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat img {
  vertical-align: middle; /* подробнее про свойство vertical-align */
}
</style>

<div class="vyrovnyat"> 
  Какой-то текст <img src="адрес_изображения" alt=""> какой-то текст
</div>

display: table-cell; и vertical-align: middle;

какой-то текст
первая строка
вторая строка
какой-то текст
<style>
.vyrovnyat {
  display: table;
  width: 100%;
  height: 7em; /* работает также как min-height, то есть будет растягиваться пока не поместится всё содержимое */
  text-align: center;
  background: #fff5d7;
}
.vyrovnyat div { /* для IE8+ */
  display: table-cell;
  vertical-align: middle;
}
.vyrovnyat div:nth-child(2) { /* не менее высоты родителя */
  background: #9F9;
}
</style>

<div class="vyrovnyat">
  <div>какой-то текст</div>
  <div>первая строка<br>вторая строка</div>
  <div>какой-то текст</div>
</div>

vertical-align и :before

Не вижу ограничений по использованию.

первая строка
вторая строка
<style>
.vyrovnyat {
  height: 7em; /* можно заменить на min-height */
  text-align: center;
  background: #fff5d7;
}
.vyrovnyat div {
  display: inline-block;
  vertical-align: middle;
  background: #9F9;
}
.vyrovnyat:before { /* для IE8+ */
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}
</style>

<div class="vyrovnyat">
  <div>первая строка<br>вторая строка</div>
</div>

position: absolute; (или position: fixed;) и картинки

смайлик
<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat img { /* для IE8+ */
  position: absolute;  /* подробнее про position: absolute; */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

<div class="vyrovnyat"> 
  <img src="адрес_изображения" alt="">
</div>

Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.

position: absolute; (или position: fixed;) и отрицательный margin

первая строка
вторая строка
<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  position: absolute;
  width: 60%;
  left: 20%;  /* если width в %, то разместить блок по центру ширины: (100% - 60%)/2 */
  height: 4em;
  top: 50%;  /* если значение height фиксированное, то следует расположить верхний край блока по середине высоты родителя */
  margin-top: -2em; /* и поднять на половину высоты потомка: 4em/2 */
  background: #9F9;
}
</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>

position: absolute; (или position: fixed;) и transform: translate

первая строка
вторая строка
<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* сместить вверх и влево на половину высоты и ширины элемента. Для IE9+, для ряда браузеров нужны префиксы. Подробнее про свойство transform */
  background: #9F9;
}
</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>

display: flex; и margin: auto;

первая строка
вторая строка
<style>
.vyrovnyat {
  display: flex; /* для IE10+, для ряда браузеров нужны префиксы */
  height: 7em;  /* можно заменить на min-height */
  background: #fff5d7;
}
.vyrovnyat div {
  margin: auto;
  background: #9F9;
}

/* или так */

.vyrovnyat {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  background: #9F9;
}

</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>
в f t
наверх ↑

30 комментариев:

usf
вроде и все просто, но часто в уже готовой верстве приходится бубном плясать, чтобы простые выравнивания сделать правильно)
NMitra
))) Возвращаемся к верстке таблицами, только через display: table;
Анонимный
Спасли; display: table-cell у меня не работал, а все такие простые, только у вас написано, что родительскому блоку нужно давай display: table!
Спасибо! :)
NMitra
td без table не используется, здесь всё тоже самое. Встречала, правда, экспериментаторов, которые родителю присваивают display: table-cell, но не считаю это лучшим вариантом.
Анонимный
hggf
Irene
vertical-align: middle - оказалось то, что надо. У меня идёт строка текста, затем блок div, в котором иконки соцсетей. Текст нужно было поднять. Билась, билась... И, ура, нашла эту статью! Большое спасибо!!!
Дакпа Чойдон
Спасибо, хорошо объяснили, всё получилось через vertical-align
NMitra
Странно, а я применяю все варианты. Да, для разных случаев, но все.
gray
как ни странно, последний пример (Для резинового блока, заданного в процентах применяется position: absolute; с transform: translate.) корректно отображается только в Опере 12.
В Опере 18, 19, 20, Next; а так же в Хроме 31, Я.браузере 13 - .blok1 (зеленый) располагается в нижней правой четверти....
gray
потратив некоторое время на решение этой задачи было найдено решение, работающее во всех перечисленных выше браузерах:
<div style="display:table; position:relative; width:100%; height:100%; overflow:hidden;">
<div style="display:table-cell; vertical-align:middle;">
<table style="margin:auto">
<tr>
<td>это резиновая таблица</td>
</tr>
</table>
</div>
</div>
NMitra
Очень много кода получилось ((( Яндекс и Хром на одной платформе стоят, по хорошему результат должен быть одним и тем же.
gray
Много кода - это да.. но это единственный способ, которым мне удалось отцентровать резиновый блочный элемент. Кстати, в CSS это выглядит так:
<style>
.xalign {
display: table;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.xalign div {
display: table-cell;
vertical-align: middle;
}
</style>

<div class="xalign"><div>
<table style="margin:auto"><tr><td>таблица</td></tr></table>
</div></div>
Анонимный
У вас странный фавикон. Каждый раз смотрю и думаю, х#й что полезное найду в этой статье. И действительно, не нахожу.
NMitra
Это фига, хотя значение похоже )) А что искали? Интересен ваш случай.
Анонимный
Спасибо!
Анонимный
Не встречал технику с transform. Для всеобщего образования пригодится.

@))) Возвращаемся к верстке таблицами, только через display: table; @
Реализовать поведение таблиц с помощью css; нее.. это движение вперед.
Да и вообще, таблицы, не такое уж и зло... Аминь! ;) Ясное дело, что про семантику и подобные молитвы забывать не стоит, но я ничего страшного не вижу, если приходится иногда юзануть табличку не по ее назначению, тем самым, улучшив какие-то определенные свойства страницы(есть такие;) или например, нужна по ТЗ поддержка разного старья.

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

ps: Редизайн сделай. Я так понял, вы девушка... и с таким дизайном... не по феншую) Угнетающе как-то все. Брр....
За копейки - http://themeforest.net/category/site-templates
Наверное, ответ на мой комментарий это ваш фавикон))ыы
NMitra
Ага, в Яндексе меню табличкой отцентрирована ))
Люблю минимум, даже сначала подумывала о чистом холсте, тем более кучу всякого в статью пихаю и так грузится как черепаха :)
Анонимный
Товарищ, который выше меня отписался на один комментарий...Уж настолько вы умный..Что же вы до сих пор в Google или Яндексе не работаете)С вашими мозгами вам только в Силиконовую долину надо ехать)Видимо вас хватает на то чтобы только желчью плеваться)Так держать,каждому свое))А сайт замечательный,все примеры полезны.
NMitra
Благодарю за поддержку! Она ценна для меня.
Андрей
Спасибо! Очень пригодилось)
Анонимный
21
Анонимный
Супер статья! Никого не слушай. Все супер полезно и доходчиво разобрано. В закладки, чтобы не потерять. Может пригодиться в будущем!!!
NMitra
Спасибо за добрые слова!
Анонимный
Спасибо очень помогли статьей:)
Андрей Сверлин
Просто спасибо за статью. От души. )))
NMitra
Благодарю за комментарий, Андрей!
Maksym Globa
ерунда!!! тут все упирается в статично заданную высоту блока.
NMitra
Потяните за правый нижний угол бежевого блока в http://jsfiddle.net/NMitra/oa3r3hd4/ в браузерах Хром и Мозила
Deni
Спасибо, Вам огромное. Я просто обожаю Ваш блог. Как только начинаю в чем-то тупить по верстке, сразу иду к Вам и зачастую нахожу нужный мне ответ. Тыкаю по всем местам на вашем блоге, где Вам капает денюшка. И другим советую. Думаю это лучшая благодарность за Ваши труды.
NMitra
Благодарю за отклик, Deni!
По правилам контекстной рекламы я не могу поощрять клики по рекламе, как бы сильно мне того не хотелось :)