Как выровнять текст или блок 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 браузерами далека от идеала и столько спорных моментов с этой семантикой.
Горизонтальное и вертикальное выравнивание
Центрирование элементов
по горизонтали и вертикали
Выравнивание элементов по центру
Чтобы горизонтально выровнять по центру блоковый элемент (например, ), можно использовать свойство 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.
Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.
Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.
Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.
Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.
Для блочных элементов свойство vertical-align не работает.
Есть два способа, как можно выйти из этой ситуации:
Для тех, кто предпочитает все смотреть в видео:
Для тех, кто любит текст, читайте ниже способ решения этой проблемы.
Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.
| Строка 1 Строка 2 Строка 3 |
Способ Б. Использовать своство display:table-cell;
Строка 1
Строка 2
Строка 3
Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.
Ситуация 1. Выравнивание одной строки текста.
Рассмотрим простой пример.
Строка, которая должна быть выровнена по вертикали
Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.
Строка, которая должна быть выровнена по вертикали
Этот способ хорошо работает, когда у вас всего одна строка с текстом.
Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.
Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.
Строка 1
Строка 2
Строка 3
Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.
Есть еще более современное решение этой проблемы — использование flexbox.
Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.
Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
6 способов вертикального выравнивания с помощью CSS
Для вертикального выравнивания двух блоков будем использовать различные свойства CSS, такие как: таблицы, line-height, отрицательного margin, transform, псевдоэлемента и flexbox.
Очень часто при верстки приходится заниматься выравнивание объектов, один относительно другого. Чаще всего такая проблема присутствует для вертикального выравнивания, с горизонтальным более или менее все понятно. Есть несколько решений для выравнивания. Расмотрим пример.
Способ №1 с ипользованием line-height
div.inner
Такое решение хорошо, когда блок по ширине больше чем содержимое. Такое решение вертикального выравнивания можно использовать для меню.
Если у нас блок будет уже, чем содержимое, то получится следующее
Чтобы исправить эту проблему, есть два решения.
Способ №2 с использование display : table
Меняем код структуры, добавляем всего один блок
текст который должен быть выравнен по вертикале
И теперь задаем display для обоих блоков. Для внешнего блока задаем display:table, для внутреннего задаем display:table-cell. Это необходимо с точки стандартов верстки. Ячейка без таблицы не может существовать
Это только два способа. Расcмотрим еще несколько методов выравнивания.
Оставляем туже двух блочную структуру. В этом решении мы обманываем браузеры, говоря что внутри блока лежит строчный элемент, а не блок. Вот такой CSS:
Поведение объясняет очень просто. Из блока, который имеет фиксированные размеры, имеет вырезается блок, у которого не известны размеры. Все браузеры автоматически высчитывают его высоту. Соответственно мы сможем абсолютно спозиционировать блок внтури внешнего блока. Этот метод кстати подходит весьма успешно для многих задач по центрированию блоков с известной высотой.
Например, для центрирования изображения с неизвестными размерами в блоке с известными размерами или, например, горизонтальное выравнивание меню сделанного на структуре UL-LI.
Представляет собой одно из самых универсальных способов, когда не знаете размеры родительского и дочернего элемента. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и сдвинуть внутренний блок в центр с помощью функции translate и значения -50% -50%.
Удобное решение для оформления, например, фотогалерей. Когда картнки имеют разные пропорции: квадратные, портретные и альбомные размеры.
Идея решения в добавлении внутри внешнего блока строчного блока высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Этот способ не будет работать, если у родителя имеется абсолютное позиционирование.
Актуальный способ вертикального выравнивания это использовать Flexbox. Данное свойство позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox — простая задача.
Flexbox актуален, но не забываем что, он поддерживается современными браузерами.
