6 способов центрирования элемента неизвестного размера по вертикали и горизонтали
Один из современных и самых простых способов центрирования – использование display: flex .
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ display: flex; align-items: center; justify-content: center; >
Вариант №2: CSS Grid
Grid – наше ближайшее и светлое будущее! Никогда прежде выравнивание блоков не была такой простой и вряд ли в скором времени что-то превзойдет CSS Grid. Хотя этот пример и похож очень на предыдущий, возможности Grid гораздо шире. В общем, если не научились работать с flexbox – можете смело его пропускать и разбираться с CSS Grid.
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ display: grid; align-items: center; justify-content: center; >
Вариант №3: центрирование через псевдоэлемент
Мой самый любимый способ. Несмотря на то, что в последнее время стал использовать flexbox – выравнивание через псевдоэлемент навсегда останется в моём сердце.
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ text-align: center; >body:before < content: ''; height: 100%; display: inline-block; vertical-align: middle; >.block
Вариант №4: line-height
Один из самых глупых вариантов, который хоть и подходит для выравнивание блока неизвестной высоты, но требует фиксированную высоту родителя (в других способах высота родителя указана лишь для примера). Кстати, этот способ также не подойдет для многострочного текста.
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ >.block < line-height: 100vh; text-align: center; >.block img
Вариант №5: position absolute
Один из моих любимых вариантов. Идеально подходит для позиционирования попапов – они должны быть поверх остального контента, а их высота никогда неизвестна, как и высота экрана пользователя.
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ position: relative; >.block
Вариант №6: table-cell
Самый древний вариант, которым пользовались на заре Интернета и во времена рассвета табличной вёрстки. Таблицами уже давно никто не верстает, но имитировать их поведение через CSS ради достижения результата – почему бы и нет?
body < margin: 0; /* for Demo only */ height: 100vh; /* for Demo only */ background: black; /* for Demo only */ display: table; width: 100%; >.block
Как выровнять текст или блок 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 браузерами далека от идеала и столько спорных моментов с этой семантикой.
HTML/CSS: как центрировать по вертикали
При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
У каждого описанного способа есть свои преимущества и недостатки, поэтому подходить к их использованию стоит критически. В определенной ситуации один способ может подходить идеально, а другой — оказаться совершенно бесполезным.
1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.
Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов.
Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.
2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:
Copyright - ThriveTalk 2017
Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:
У этого способа есть недостаток. Его удобно применять, когда вы уверены, что выравниваемый элемент не будет переполняться. В противном случае при переносе строки между текстом появятся большие вертикальные отступы, что почти наверняка станет нежелаемым поведением.
3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:
Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:
Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.
В результате получаем следующее:
Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.
Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).
4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.
У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.
5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .
Стоит отметить, что все описываемые далее действия применимы и в случаях, когда нужно выполнить абсолютное позиционирование внутри другого элемента.
Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:
В данном случае модальное окно расположено не верно: ровно по центру находится левый верхний угол модального окна, а не его физический центр. Для того, чтобы выполнить его абсолютное позиционирование, изменим положение модального окна с помощью отрицательного margin :
У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:
В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Как выровнять текст или блок по вертикали в CSS?
Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.
В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.
Навигация по статье:
- Свойство для вертикального выравнивания vertical-align
- Выравнивание текста по центру CSS
- Выравнивание блока по центру в CSS
Свойство для вертикального выравнивания vertical-align
Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.
В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.
Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег
и задаем для него стиль vertical-align:middle;
Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.
Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.
