Выравнивание по горизонтали css. CSS - Выравнивание по центру. Выравнивание текста по центру
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицыстилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Первый метод с line-height
Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .
первый пример. демо №1
первый пример. демо №1
/* №1 */
.talign1{
border: 1px solid red;
height:200px;/* высота блока */
}
.talign1 > p{
line-height:200px;/* устанавливаем высоту строки в соответствии с высотой блока */
margin:0;/* убираем внешние отступы, если они есть */
text-align:center;/* выравниваем текст по центре по горизонтали */
padding: 0;/* убираем внутренние отступы, если они есть */
}
/* end №1*/
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Пример. Демо №2
Пример. Демо №2
/* №2 */
.talign2{
border: 1px solid red;
line-height:200px;/* высота строки блока */
}
.talign2 div{
text-align:center;/* выравниваем элементов по центре по горизонтали */
}
.talign2 img{
vertical-align:middle;/* выравниваем картинки по центре по вертикали */
border: 1px solid black;
}
/* end №2*/
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
Здесь используем старую технику, превратив элементы в таблицу с ячейками. При этом теги таблицы
применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?
Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.
Выравнивание текста по вертикали в CSS
— весьма непростая работа. Я видел достаточно людей, борющихся с этим, и постоянно обнаруживаю “критические” ошибки, когда дело доходит до реального адаптивного дизайна.
Но не бойтесь: если вы уже боретесь с CSS
вертикальным выравниванием - вы обратились по адресу.
Поговорим о свойстве CSS vertical align
Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align
”. Ах, если бы все было так просто…
CSS свойство vertical-align
отлично работает с таблицами, но не с div
или другими элементами. Когда вы используете его для div
, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;
.
Посмотрите пример
Мы хотим центрировать контент, а не сам div!
У вас есть два выхода. Если у вас только элементы div
с текстом, то можно использовать свойство line-height
. Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.
Правда у этого подхода CSS выравнивания по вертикали
есть недостаток. Если текст многострочный, тогда высота строки будет умножена на количество строк. Скорее всего, в этом случае, у вас получится ужасно сверстанная страница.
Взгляните на этот пример
Если контент, который вы хотите центрировать, состоит больше, чем из одной строки, тогда лучше использовать табличные div
. Также можно использовать таблицы, но семантически это не правильно. Если вам нужны разрывы для адаптивных целей, лучше использовать элементы div
.
Чтобы это работало, должен быть родительский контейнер с display: table
, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell
и vertical-align: middle
.
Посмотрите пример
Почему это работает с табличной разметкой, но не с элементами div
? Потому что у строк в таблице одинаковая высота. Когда содержимое ячейки таблицы не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальные отступы, чтобы центрировать содержимое.
Свойство position
Начнем с основ выравнивания по вертикали CSS div
:
position: static
- это значение по умолчанию. Элемент отображается в соответствии с порядком HTML
;
position: absolute
- используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static
). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
position: relative
- используется для позиционирования элемента относительно его нормального положения (статического
). Это значение сохраняет порядок потока документа;
position: fixed
- используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.
Примечание:
некоторые свойства (top
и z-index
) работают только в том случае, если для элемента задано значение position
(не static
).
Давайте приступим к делу!
Вы хотите осуществить CSS выравнивание по центру по вертикали
? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.
Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:
Старое свойство
: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример
;
Новое свойство CSS3
: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример
.
В принципе, если вы хотите центрировать контент, никогда не используйте top: 40%
или left: 300px
. Это прекрасно работает на тестовых экранах, но это не центровка.
Помните position: fixed
? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента - она всегда будет позиционировать относительно окна браузера.
Вы слышали о спецификации flexbox?
Можно использовать flexbox
. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали
. С flexbox
управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9
и версии ниже. Вот пример того, как вертикально центрировать блок:
Посмотреть пример
Используя flexbox
расположение, можно центрировать несколько блоков.
Если вы примените то, что узнали из этих примеров, то сможете освоить CSS выравнивание блока по вертикали
в кратчайшие сроки.
Ссылки и дополнительная литература
Изучение CSS разметки
FlexBox Froggy
Песочница flexbox
Перевод статьи “CSS Vertical Align for Everyone (Dummies Included)
” был подготовлен дружной командой проекта .
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков
выровнять div
по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе
.
Простое центрирование DIV-элемента на странице
Этот метод будет отлично работать во всех браузерах.
CSS
Center-div
{
margin: 0 auto;
width: 100px;
}
Пример
Значение auto
в свойстве margin
устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента
обязательно должно быть установлено значение width
.
Центрируем DIV внутри DIV-элемента старым способом
Этот метод div
выравнивания по центру будет работать во всех браузерах.
Внешний div
может быть помещен как угодно, но у внутреннего блока div
обязательно должна быть указана ширина (width
).
Центрируем DIV внутри DIV-элемента с помощью inline-block
В этом методе центрирования div
внутри div
необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8
.
Свойство text-align
работает только в inline-элементах
. Значение inline-block
позволяет отобразить внутренний div
в качестве inline-элемента
, а также в качестве блока (inline-block
). Свойство text-align
во внешнем div-элементе
позволит нам центрировать внутренний div
.
Центрируем DIV внутри DIV-элемента горизонтально и вертикально
Здесь для центрирования div
по центру страницы используется margin: auto
. Пример будет работать во всех современных браузерах.
У внутреннего div-элемента
должна быть указана ширина (width
) и высота (height
). Метод не сработает, если у внешнего div-элемента
будет фиксированная высота.
Центрируем DIV по нижней границе страницы
Здесь для расположения div
по центру по вертикали используется margin: auto
и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
У внутреннего div
должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom
внешнего div
. Вы также можете центрировать div
по верхней границе страницы, заменив свойство bottom на свойство top
.
Центрируем DIV на странице вертикально и горизонтально
Здесь, чтобы выровнять div
по центру, снова используется margin: auto
и абсолютное позиционирование внешнего div
. Метод будет работать во всех современных браузерах.
У div-элемента
должна быть установлена ширина (width
) и высота (height
).
Делаем адаптивное центрирование DIV-элемента на странице
Здесь для выравнивания div по центру средствами CSS
мы делаем ширину div-элемента
адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.
CSS
Center-div
{
margin: 0 auto;
max-width: 700px;
}
Пример
У центрированного div-элемента
должно быть установлено свойство max-width
.
Центрируем DIV внутри элемента с помощью свойств внутреннего блока
Внутренний div-элемент
здесь адаптивен. Этот метод расположения div
внутри div
по центру будет работать во всех браузерах.
Здесь у нас несколько элементов с примененным свойством inline-block
, расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS
; то есть, если размер экрана меньше 600 пикселей, то свойство max-width
как для левого, так и для правого div-элемента
устанавливается на 100%.
DIV-элемент, центрированный при помощи Flexbox
Здесь мы располагаем CSS div
по центру с помощью Flexbox
. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+
, IE11
, Microsoft Edge
, Firefox 38+
, Safari 9+
, Opera 30+
, iOS Safari 9+
, а также Android Browser 40+
.
Центрирование элементов по вертикали с помощью CSS является задачей, которая представляет определенную трудность для разработчиков. Однако имеется несколько методов ее решения, которые достаточно просты. В данном уроке представлено 6 вариантов вертикального центрирования содержания.
Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный - задаем ему ширину и автоматическую установку левого и правого полей.
Большинство людей, используя свойство text-align:
, обращаются к свойству vertical-align
для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign
, который укрепляет веру в то, что vertical-align
правильный путь к решению задачи.
Но атрибут valign
работает только в ячейках таблицы. А свойство vertical-align
очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.
Значение свойства vertical-align
действует по отношению к родительскому строчному элементу.
В строке текста выравнивание производится по отношению к высоте строки.
В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).
Но, к сожалению, свойство vertical-align
не действует в блочных элементах (например, параграфах внутри элемента div
). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.
Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.
Метод line-height
Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.
По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .
HTML:
Нужный текст
CSS:
#child {
line-height: 200px;
}
Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.
Центрирование изображения с помощью line-height
А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.
Значение свойства line-height
должно быть больше высоты изображения.
Метод таблиц CSS
Выше упоминалось, что свойство vertical-align
применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align
для вертикального центрирования содержания.
Примечание:
Таблица CSS не является тем же, что и HTML таблица.
Мы устанавливаем табличный вывод для родительского элемента div
, а вложенный элемент div
выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align
для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.
В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div
будет изменять размер в соответствии со своим содержанием.
Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block
для вложенного контейнера.
Абсолютное позиционирование и отрицательные поля
Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.
В коде примера выполняется одновременное центрирование по горизонтали и вертикали:
Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div
устанавливаем значения свойств top
и left
равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.
Данный метод работает не во всех браузерах.
Абсолютное позиционирование и растягивание
В коде примера выполняется центрирование по вертикали и горизонтали.
Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right,
и left
значения 0.
Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div
по центру родительского элемента.
К сожалению, данный метод не работает в IE7 и ниже.
Равные отступы сверху и снизу
В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.
В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.
Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.
Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.
150 + 150 + 100 = 400
Использование % позволяет расчеты оставить браузеру.
Данный метод работает везде. Обратной стороной является необходимость в расчетах.
Примечание:
Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.
Плавающий div
Данный метод использует пустой элемент div
, который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div
размещается до нашего вложенного элемента в коде HTML.
Мы смещаем пустой div
влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.
Так как данный div
является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both
, но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div
.
Верхняя граница вложенного элемента div
находится непосредственно под нижней границей пустого элемента div
. Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom
для плавающего пустого элемента div
.
Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div
и знаний о высоте вложенного элемента.
Заключение
Все описанные методы просты в использовании. Трудность заключается в том, что ни один из них не подходит для всех случаев. Нужно анализировать проект и выбирать тот, который подходит наилучшим образом под требования.
Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.
Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.
В качестве примера рассмотрим следующий фрагмент:
Some text
и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.
Решение задачи
«Правильные» браузеры (включая MSIE
Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:
div { display: table-cell; vertical-align: middle; }
div { display: table-cell; vertical-align: bottom; }
Internet Explorer (до 7-й версии включительно)
Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):
div { position: relative; } div span { display: block; position: absolute; bottom: 0%; left: 0%; width: 100%; }
Этот набор правил работает и в «правильных» браузерах.
Указывать свойства
Div span { display: block; width: 100%; }
не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.
Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить - введём ещё один строковый элемент:
Материал для изучения:
Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)