Как выровнять блок по вертикали 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 и более ранних версий:

Как выровнять блок по вертикали css

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.

1-ый способ

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

#wrapper < display : table; >#cell

Плюсы

  • Контент может динамически изменять высоту (высота не определена в CSS).
  • Контент не обрезается в случае, если для него недостаточно места.

Минусы

  • Не работает в IE 7 и меньше
  • Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

#content < position : absolute; top : 50%; height : 240px; margin-top : -120px; /* минус от половины высоты */ >

Плюсы

  • Работает во всех броузерах.
  • Нет лишней вложенности.

Минусы

  • Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

#floater < float : left; height : 50%; margin-bottom : -120px; >#content

Плюсы

  • Работает во всех броузерах.
  • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

  • Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

#content

Плюсы

  • Очень просто.

Минусы

  • Не работает в Internet Explorer
  • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

#content

Плюсы

  • Работает во всех броузерах.
  • Не обрезает текст, если он не влез.

Минусы

  • Работает только с текстом (не работает с блочными элементами).
  • Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

  • #floater (чтобы выровнять контент по центру)
  • #centred (центральный элемент)
    • #side
      • #logo
      • #nav (список
          )

        Напишем следующую html-разметку:

        Шаг 2

        Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

        html, body < margin : 0; padding : 0; height : 100%; >body < background : url('page_bg.jpg') 50% 50% no-repeat #FC3; font-family : Georgia, Times, serifs; >#floater < position : relative; float : left; height : 50%; margin-bottom : -200px; width : 1px; >#centered < position : relative; clear : left; height : 400px; width : 80%; max-width : 800px; min-width : 400px; margin : 0 auto; background : #fff; border : 4px solid #666; >#bottom < position : absolute; bottom : 0; right : 0; >#nav < position : absolute; left : 0; top : 0; bottom : 0; right : 70%; padding : 20px; margin : 10px; >#content

        Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

        Нижний отступ для элемента "floater"-а равен минус половине высоты контента (400px), а именно -200px;

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

        Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

        Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

        Шаг 3

        И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

        #nav ul < list-style : none; padding : 0; margin : 20px 0 0 0; text-indent : 0; >#nav li < padding : 0; margin : 3px; >#nav li a < display : block; background-color : #e8e8e8; padding : 7px; margin : 0; text-decoration : none; color : #000; border-bottom : 1px solid #bbb; text-align : right; >#nav li a::after < content : '»'; color : #aaa; font-weight : bold; display : inline; float : right; margin : 0 2px 0 5px; >#nav li a:hover, #nav li a:focus < background : #f8f8f8; border-bottom-color : #777; >#nav li a:hover::after < margin : 0 0 0 7px; color : #f93; >#nav li a:active

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

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

        Другая интересная вещь, которую мы использовали для меню - это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

        Шаг 4

        Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

        #centered < -webkit-border-radius : 8px; -moz-border-radius : 8px; border-radius : 8px; >h1, h2, h3, h4, h5, h6 < font-family : Helvetica, Arial, sans-serif; font-weight : normal; color : #666; >h1 < color : #f93; border-bottom : 1px solid #ddd; letter-spacing : -0.05em; font-weight : bold; margin-top : 0; padding-top : 0; >#bottom < padding : 10px; font-size : 0.7em; color : #f03; >#logo < font-size : 2em; text-align : center; color : #999; >#logo strong < font-weight : normal; >#logo span < display : block; font-size : 4em; line-height : 0.7em; color : #666; >p, h2, h3 < line-height : 1.6em; >a

        В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

        Совместимость

        Как вы уже наверное предположили, основной источник проблем совместимости - Internet Explorer:

        • Элементу #floater обязательно надо установить ширину
        • В IE 6 лишние отступы вокруг меню

        6 способов вертикального выравнивания с помощью CSS

        Для вертикального выравнивания двух блоков будем использовать различные свойства CSS, такие как: таблицы, line-height, отрицательного margin, transform, псевдоэлемента и flexbox.

        Очень часто при верстки приходится заниматься выравнивание объектов, один относительно другого. Чаще всего такая проблема присутствует для вертикального выравнивания, с горизонтальным более или менее все понятно. Есть несколько решений для выравнивания. Расмотрим пример.

        Способ №1 с ипользованием line-height

        div.inner

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

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

        Если у нас блок будет уже, чем содержимое, то получится следующее

        Вертикальное выравнивание с помощью CSS

        Чтобы исправить эту проблему, есть два решения.

        Способ №2 с использование display : table

        Меняем код структуры, добавляем всего один блок

        текст который должен быть выравнен по вертикале

И теперь задаем display для обоих блоков. Для внешнего блока задаем display:table, для внутреннего задаем display:table-cell. Это необходимо с точки стандартов верстки. Ячейка без таблицы не может существовать

.inner < border : 1px solid red; height : 75px; width : 200px; display : table >.inner div

Используя правило vertical-align : middle, современные браузеры выравнивают текст внутри ячейки по вертикали.

Вертикальное выравнивание с помощью CSS

Это только два способа. Расcмотрим еще несколько методов выравнивания.

Способ №3 с абсолютно позиционирования и margin-top

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

.inner < position : relative; height : 200px; width : 200px; border : 1px solid red >.inner div

Поведение объясняет очень просто. Из блока, который имеет фиксированные размеры, имеет вырезается блок, у которого не известны размеры. Все браузеры автоматически высчитывают его высоту. Соответственно мы сможем абсолютно спозиционировать блок внтури внешнего блока. Этот метод кстати подходит весьма успешно для многих задач по центрированию блоков с известной высотой.

Например, для центрирования изображения с неизвестными размерами в блоке с известными размерами или, например, горизонтальное выравнивание меню сделанного на структуре UL-LI.

Способ №4 с помощью transform

Представляет собой одно из самых универсальных способов, когда не знаете размеры родительского и дочернего элемента. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и сдвинуть внутренний блок в центр с помощью функции translate и значения -50% -50%.

.outer < position: relative; >.inner

Решение №5 с помощью псевдоэлемента

Удобное решение для оформления, например, фотогалерей. Когда картнки имеют разные пропорции: квадратные, портретные и альбомные размеры.

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

.inner < display : inline-block; vertical-align : middle; text-align : center; >.outer:before

Этот способ не будет работать, если у родителя имеется абсолютное позиционирование.

Способ №6 с помощью Flexbox

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

.outer < display : flex; width : 200px; height : 200px; >.inner

Flexbox актуален, но не забываем что, он поддерживается современными браузерами.

  1. https://habr.com/ru/company/netcracker/blog/277433/
  2. https://habr.com/ru/post/71236/
  3. http://blog.sribna.com/vertikalnoe-vyiravnivanie-v-css-chast-2.htm

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

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

какой-то текст

  
какой-то текст

line-height = height

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

выровнять однострочный текст по вертикали

  
выровнять однострочный текст по вертикали

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

Какой-то текст какой-то текст

  
Какой-то текст какой-то текст

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

какой-то текст
первая строка
вторая строка
какой-то текст

  
какой-то текст
первая строка
вторая строка
какой-то текст

vertical-align и :before

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

первая строка
вторая строка

  
первая строка
вторая строка

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

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

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

первая строка
вторая строка

  
первая строка
вторая строка

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

первая строка
вторая строка

  
первая строка
вторая строка

display: flex; и margin: auto;

первая строка
вторая строка

 .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 
первая строка
вторая строка

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 потратив некоторое время на решение этой задачи было найдено решение, работающее во всех перечисленных выше браузерах:

это резиновая таблица

NMitra Очень много кода получилось ((( Яндекс и Хром на одной платформе стоят, по хорошему результат должен быть одним и тем же. gray Много кода - это да.. но это единственный способ, которым мне удалось отцентровать резиновый блочный элемент. Кстати, в CSS это выглядит так:

.xalign display: table;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
>

.xalign div display: table-cell;
vertical-align: middle;
>

таблица

Анонимный У вас странный фавикон. Каждый раз смотрю и думаю, х#й что полезное найду в этой статье. И действительно, не нахожу. NMitra Это фига, хотя значение похоже )) А что искали? Интересен ваш случай. Анонимный Спасибо! Анонимный Не встречал технику с transform. Для всеобщего образования пригодится.

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

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

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

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