Как центрировать элемент css по вертикали
Перейти к содержимому

Как центрировать элемент css по вертикали

  • автор:

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

Центрирование элементов
по горизонтали и вертикали

Выравнивание элементов по центру

Чтобы горизонтально выровнять по центру блоковый элемент (например, ), можно использовать свойство margin: auto; .

Определение ширины элемента предотвратит его вытягивание до границ контейнера.

При таких установках элемент займет заданную ширину, а оставшееся пространство будет поровну поделено между двумя отступами:

Это элемент div расположен по центру.

 .center

Внимание! Выравнивание по центру не будет работать, если свойство width не установлено (или установлено в 100%).

Выравнивание текста по центру

Чтобы внутри элемента выровнять только текст, используется свойство text-align: center; .

Этот текст выровнен по центру.

 .center

Выравнивание изображения по центру

Чтобы выровнять изображение по центру, нужно сделать элемент блоковым и установить левый и правый отступы в значение auto :

Париж

Выравнивание по левому/правому краю — Используем свойство position

Один из способов выровнять элемент по левому или правому краю, это использовать свойство position: absolute; :

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

 .right

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

Выравнивание по левому/правому краю — Используем свойство float

Другой способ выровнять элемент по левому или правому краю, это использовать свойство float :

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

 .right

Прием clearfix

Если высота плавающего элемента (с заданным свойством float ) больше, чем высота его контейнера, то он будет «переполнять» его и выходить за его пределы. Чтобы это исправить, можно воспользоваться специальным приемом clearfix.

Без clearfix

С clearfix

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

 .clearfix::after

Центрирование по вертикали — Используем свойство padding

В CSS существует множество способов центрирования элемента по вертикали. Самое простое решение, это использовать свойства padding-top и padding-bottom :

Я центрирован по вертикали.

 .center

Чтобы центрировать и по вертикали и по горизонтали, используются свойства padding и text-align: center :

Я центрирован вертикально и горизонтально.

 .center

Центрирование по вертикали — Используем свойство line-height

Еще один способ центрировать элемент вертикально, это использовать свойство line-height со значением, равным значению свойства height :

Я центрирован вертикально и горизонтально.

 .center < line-height: 200px; height: 200px; border: 3px solid green; text-align: center; >/* Если в тексте несколько строк, добавьте такой код: */ .center p

Центрирование по вертикали — Используем свойства position и transform

Если свойства padding и line-height использовать не хочется, то есть другое решение — использовать позиционирование и свойство transform :

Я центрирован вертикально и горизонтально.

 .center < height: 200px; position: relative; border: 3px solid green; >.center p

Центрирование по вертикали — Используем Flexbox

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

5 способов выровнять HTML-элемент горизонтально и вертикально

Устали искать способ вертикально и горизонтально выровнять HTML-элемент? В этой статье мы собрали целых 5 способов сделать это!

Обложка поста 5 способов выровнять HTML-элемент горизонтально и вертикально

Каждый, кто работает с HTML/CSS, рано или поздно сталкивается с проблемой вертикального и горизонтального выравнивания элемента. Чтобы вы лишний раз не гуглили и не находили много разных вариантов, мы собрали здесь несколько самых популярных.

Способ 1

В поддерживаемых браузерах можно использовать top: 50% / left: 50% в сочетании с translateX(-50%) translateY(-50%) для динамического горизонтального/вертикального центрирования элемента:

.container

Пример можно посмотреть здесь, а тут можно увидеть полноэкранную версию.

Способ 2

В поддерживаемых браузерах также можно присвоить свойству display значение flex и использовать align-items: center с justify-content: center для вертикального и горизонтального центрирования соответственно. Главное, не забудьте добавить вендорные префиксы (как в примере), чтобы этот приём сработал в большем количестве браузеров:

html, body, .container < height: 100%; >.container

Способ 3

В некоторых случаях вам будет нужно убедиться, что высота элемента html / body равна 100%.

Для вертикального выравнивания присвойте свойствам width и height родительского элемента значение 100% и добавьте display: table . В дочернем элементе измените значение display на table-cell и добавьте vertical-align: middle .

Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center , либо margin: 0 auto , если вы имеете дело с блоковым элементом. Это должно сработать в большинстве браузеров:

html, body < height: 100%; >.parent < width: 100%; height: 100%; display: table; text-align: center; >.parent > .child

Примеры доступны здесь и здесь.

Способ 4

Здесь предполагается, что высота текста заранее известна. В этом случае, например, 18px . Теперь нужно всего лишь присвоить свойству position элемента значение absolute и подвинуть сверху на 50% относительно родительского элемента. Наконец, свойству margin-top нужно присвоить отрицательное значение, равное половине высоты элемента:

html, body, .container < height: 100%; >.container < position: relative; text-align: center; >.container > p

За примерами сюда и сюда. Этот вариант должен работать во всех поддерживаемых браузерах.

Способ 5

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

.parent < height: 200px; width: 400px; text-align: center; >.parent > .child

Пример можно посмотреть здесь.

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

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

Задача

Выровнять один блок внутри другого по вертикали.

Исходная верстка

Вариант 1. Высоты обоих блоков известны

Расчеты на калькуляторе

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

.parent < height:200px; overflow:hidden; >.child< height:50px; margin:75px 0; // (200-50)/2 >

Свойство overflow:hidden препятствует схлопыванию верхнего маргина дочернего элемента.

Вариант 2. Известна высота внешнего блока

Одна строка

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

.parent < height: 200px; line-height: 200px; >.child

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

Отметим, что центрировалось именно текстовое содержимое блока, а фон растянулся на всю высоту строки. Чтобы этого не происходило, если необходимо сохранить фон, нужно превратить блок в строчный элемент, добавив ему свойство display: inline .

При должной подготовке можно попробовать и многострочный текст выровнять таким же способом:

.parent < height: 200px; line-height: 200px; >.child< line-height: normal; // переопределяем высоту строки в дочернем элементе display: inline-block; vertical-align: middle; >

CHILD
CHILD

Вариант 3. Известна высота внутреннего блока

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

Абсолютное позиционирование выдергивает элемент из общего потока, поэтому важно определить относительное позиционирование ( position: relative ) для родительского элемента, относительно которого будет происходить центрирование.

.parent < position: relative; >.child
Способ #1. Растягивание

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

.child
Способ #2. Отрицательный маргин

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

.child

Вариант 4. Высоты обоих блоков неизвестны

Коварный vertical-align

Одним своим названием свойство vertical-align вселяет тонны ложных надежд в сердца юных верстальщиков. Но, увы!, оно не поможет нам в этом случае. Это свойство действует только на строчные элементы, причем выравнивает их не относительно контейнера, а относительно друг друга в одном контейнере.
Тем не менее, мы все же можем воспользоваться этим скользким свойством при одном условии — мы внутри таблицы.

Преимущества таблиц

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

.wrapper < display: table; >.parent

Трансформируй это

Этот способ очень напоминает прием с отрицательным верхним маргином и так же использует абсолютное позиционирование.

.parent < position: relative; >.child

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

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

.parent: before < display: inline-block; height: 100%; vertical-align: middle; content: ""; >.child

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

Новые технологии

Флексбокс предоставляет идеальные инструменты для выравнивания по всем возможным осям. Как же обидно, например, что свойство margin: auto , так хорошо помогающее при горизонтальном центрировании, по вертикали не работает. А теперь работает:

.parent < display: flex; height: 200px; width: 350px; >.child

Внутри флекс-контейнера свойство margin:auto работает по всем фронтам.

Как выровнять элемент по вертикали внутри блочного элемента

Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

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

1. Представить блочный элемент как ячейку таблицы ( display: table-cell ).
2. IE6-7: метод expression.
3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
4. Позиционирование при помощи внешнего блока ( position:absolute ).

Ну а подведя итоги, рассмотрим еще один метод:

5. Выравнивание с помощью свойства vertical-align.

display: table-cell

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

   Вертикальное выравнивание. Способ display: table-cell .wrapper  
  • Простота;
  • Выравнивает как одну, так и несколько строк.
  • Не работает в 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, но т.к. эти браузеры уже устарели, на них можно закрыть глаза.

line-height

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

   Вертикальное выравнивание. Способ line-height .wrapper  
  • Простота;
  • Кроссбраузерность.
  • Подходит только для однострочных элементов;
  • Позволяет выравнивать только по центру.

position и отрицательный margin вверх

Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top , равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative :

   Вертикальное выравнивание. Способ line-height .wrapper < position: relative; height: 400px; >.wrapper p 
Я выровнен по вертикали

  • Кроссбраузерность;
  • Выравнивать элементы можно как по центру, так и в любом другом положении.
  • Трудоемко при большом количестве элементов;
  • Сложно управлять;
  • Необходимо знать и фиксировать высоту элемента;
  • В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

Итог по популярным методам

Как видно, данные методы не являются универсальными – каждый из них имеет пусть и небольшие, но недостатки. Наиболее универсальным оказывается метод display: table-cell , но он мне никогда не нравился, к тому же мы очень долго не отказывались от поддержки IE6-7. Поэтому появилась необходимость поработать над чем-то более универсальным. Рассмотрим Выравнивание при помощи vertical-align .

Выравнивание при помощи vertical-align

Как известно, свойство vertical-align не работает для блочных элементов, поэтому применять это свойства для них бесполезно. Однако, данное свойство прекрасно работает для inline и inline-block элементов. Если мы попробуем применить данное свойство для элементов внутри блочного элемента, то мы получим следующую картину:

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5  

Как видно, элементы выравниваются относительно строки, а не всего блока, что нам не подходит. Попробуем тогда внутрь блока добавить элемент (т.к. для inline элемента высоту задать нельзя, то элемент должен быть inline-block ) с высотой равной высоте внешнего блока. Добавляем (на картинке ниже показан серой линией) и получаем:

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5 < vertical-align:bottom; font-size:12px; >.spanvmiddle  

Зададим для всех элементов vertical-align:middle .

Что ж, одну строку мы таким образом отцентрировали. А что, если надо несколько строк? И тут проблем нет. Надо лишь для текстовых элементов задать display:inline-block :

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.wrapper span < display:inline-block; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:middle; font-size:11px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:32px; >.el5 < vertical-align:middle; font-size:11px; >.spanvmiddle  
строками текста с тремя
строками текста

Если нам не важна совместимость со старыми версиями IE, то элемент мы можем удалить, а его стили заменить на:

.wrapper:after

Стоит отметить несколько моментов:

  • К элементам, которые выравниваются, нельзя применять свойство float .
  • Между соседними inline-block элементами всегда есть расстояние, поэтому если их надо прижать друг к другу, то для внешнего блока надо задать font-size:0px; а у самих элементов восстановить, задав нужное значение.
  • Для внутренних элементов таким образом можно задавать как одинаковые значения ( top , bottom или middle ), так и разные.
  • Простота;
  • Кроссбраузерность;
  • Выравнивать элементы можно как по центру, так и в любом другом положении;
  • Подходит как для одной строки, так и для нескольких. Также, т.к. элемент имеет display:inline-block , он может содержать текст, графику (фон, картинка) и любой другой элемент.
  • Приходится добавлять дополнительный элемент;
  • При использовании псевдоэлемента :after , теряется поддержка старыми версиями IE.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *