Выравнивание текста по центру CSS
Есть Owl Карусель, в которой нужно центрировать h2, p и a. Пишу text-align: center; — не работает. Как только не пробовал, всё равно тест не выравнивается. Возможно что-то мешает. Буду благодарен за помощь!
HTML:
Надпись 1
Описание первого слайда карусели
Читать дальше Надпись 2
Описание второго слайда карусели
Читать дальше 
Надпись 3
Описание третьего слайда карусели
Читать дальше
.owl-carousel < position: relative; >.owl-nav < position: absolute; width: 100%; top: 100px; >.owl-prev < left: 0; position: absolute; height: 100px; width: 50px; >.owl-next < right: 0; position: absolute; height: 100px; width: 50px; >.owl-dots < position: absolute; left: 48%; top: 270px; >.item < height: 300px; >.item h2, p, a < position: absolute; >.item h2
Отслеживать
задан 3 мая 2020 в 16:02
141 3 3 серебряных знака 18 18 бронзовых знаков
А это что .item h2, p, a
@Sevastopol’ Указал, элементы понесло куда-то. Когда уменьшаешь страницу элементы вообще пропадают. И плюс я почему-то не могу указывать значения для h2, p, и а вместе, приходится каждому элементу писать отдельно, иначе съезжают все элементы сайта, даже те, которые не относятся к карусели. Можно ли сделать как-то через text-align?
4 мая 2020 в 12:31
@Andrey Fedorov Без этого элементы не накладываются поверх слайда (изображения) карусели
4 мая 2020 в 12:32
в таком случае они не могут быть выровнены, так как у них нет родителя, относительно которого возможно было бы выравнивание с помощью text-align: center .
4 мая 2020 в 15:57
@Andrey Fedorov а они же находятся в div или это не то? Все 3 элемента обёрнуты в div с классом item. Может в его свойства что-либо прописать?
CSS — Выравнивание по центру
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
CSS — Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }Браузеры, которые поддерживают данное решение:
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
.parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS — Выравнивание по горизонтали
1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:
.block { margin-left: auto; margin-right: auto; }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:
.parent { text-align: center; } .child { display: inline-block; }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS — Выравнивание по вертикали
1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
.parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
.parent { display: table; } .child { display: table-cell; vertical-align: middle; }Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 10
18.12.2020, 10:18
Возникла у меня тут задачка, казалось-бы простая — сделать кастомный нумерованный список, с большими цифрами-буллетами, и примыкающим к ним многострочными item’ами, отцентрованными по вертикали относительно буллетов.
Ну дизайнер так надизайнил, а че — красиво ведь…
Вобщем все известные трюки не сработали, и в результате родил новый.
На флексах.
А вдруг, кому-либо пригодится…
А может, кто-нибудь более грамотный что-либо оптимизирует… 😉
Как выровнять по центру в CSS
Как часто у вас, как у веб-дизайнера, возникает задача при помощи CSS выровнять по центру какой-либо элемент на странице? Иногда это сделать очень легко, а иногда приходится повозиться. В этой статье предлагаю раз и навсегда разобраться в данном вопросе чтобы выравнивание в CSS не вызывало у вас никаких проблем.
Все примеры в этой статье интерактивные. Размеры и расположение элементов в них можно менять. Для этого нужно просто .
Подсказка: наведите курсор на правый нижний угол.
Как в CSS выровнять по горизонтали?
В зависимости от того, какой элемент вам нужно выровнять по центру горизонтально, можно воспользоваться одним из следующих способов.
text-align: center
Самый быстрый и простой способ выровнять текст или изображение по центру родительского элемента — использовать свойство CSS text-align: center . Чтобы этот метод работал, элементы, которые вы хотите отцентровать, должны иметь свойство display — inline или inline-block , а их родительский элемент должен быть блочным (block или inline-block ). Поэтому если text-align: center не работает, проверьте, все ли в порядке со свойством display .
margin: auto
При помощи свойства margin можно центрировать блочные элементы. Однако margin: auto работает только для выравнивания по горизонтали. К тому же, обязательно должна быть задана ширина ( width , min-width или max-width ). Если ее не задать, блок растянется на всю ширину родительского элемента.
Если ширина блока неизвестна или вы не хотите ее жестко ограничивать, данный метод не подходит.
Как в CSS выровнять по вертикали?
Часто именно выравнивание по вертикали вызывает большое количество трудностей и непонимания. Но на самом деле ничего сложного в этом нет. Давайте разберемся по порядку.
padding или line-height
Допустим, вам нужно выровнять все содержимое элемента по центру вертикально, т.е. нужно чтобы расстояние от верхней границы элемента до верхнего края контента было равным расстоянию от нижней границы элемента до нижнего края контента. Для этого можнопросто задать равные вертикальные отступы padding .
.container Другой способ — выравнивание содержимого по вертикальному центру при помощи свойства line-height . Он подойдет тогда, когда высота элемента фиксированная и задана при помощи свойства height , а содержимое этого элемента помещается в одну строку (согласен, слишком много ограничений).
.container < height: 36px; white-space: nowrap; >.container div, .container span < line-height: 36px; >.inline-block Lorem ipsum Dolor sit amet Обратите внимание, что значения height и line-height должны быть равными.
vertical-align: middle
Свойство CSS vertical-align выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с display: inline-block ;
Кроме того, при помощи свойства vertical-align можно выровнять по вертикали содержимое ячеек таблицы. Этим можно воспользоваться для того, чтобы выровнять блочный элемент, хакнуть систему, так сказать.
.center
Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).
Лично я не рекомендую использовать этот способ. Он старый и глючный, был придуман во времена, когда еще нужно было оптимизировать под Internet Explorer, не нужно было делать дизайн адаптивным и не существовало flexbox и других современных способов, о которых речь пойдет ниже.
transform: translate()
Свойство CSS transform позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉
В рамках этой статьи рассмотрим использование свойства transform c функцией translate() в качестве значения. Суть метода сводится к следующему:
.container < position: relative; >.center
Обратите внимание, что родительскому элементу нужно задать position: relative; иначе дочерний элемент будет выравниваться относительно ближайшего родителя с position: relative или, если такого нет, — относительно страницы.
Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства margin .
.container < position: relative; >.center
Но лучше воспользоваться волшебным свойством transform: translate(-50%, -50%); Оно также сдвигает блок на половину его длины и высоты соответственно, при этом нам не нужно указывать абсолютные размеры. Для адаптивного дизайна то, что нужно!
flexbox CSS
Flexbox — современный и очень гибкий способ расположения элементов на странице, который позволяет с легкостью создавать красивые интерфейсы, не засоряя код лишней разметкой и стилями. Я очень рекомендую вам им овладеть. В ближайших постах обязательно расскажу о нем подробнее.
Ну а пока вернемся к выравниванию по центру.
.container . Теперь давайте разберемся, что все это значит.
display: flex
При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.
justify-content: center
Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство flex-direction ). Ось может быть либо горизонтальной ( row или row-reverse ), либо вертикальной ( column или column-reverse ). По умолчанию используется значение row , т.е. наши элементы располагаются по горизонтальной оси слева направо.
align-items: center
Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство align-items описывает, как элементы контейнера расположены относительно нее.
Вот примерно то, что должно получиться.
Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько — просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!
Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с vertical-align: middle и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно выровнять текст или картинку по центру горизонтально.
Надеюсь, вы нашли в этой статье то, что искали. А если нет, спросите в комментариях, я обязательно отвечу. Всем удачного центрирвания!
Как выровнить по центру блок с элементами DIV, UL, LI
Admin 
18.12.2017 , обновлено: 09.05.2018 
CSS, HTML
Разбираем центровку блочных элементов в CCS. Располагаем по центру несколько DIV или LI элементов. Предлагаю несколько своих вариантов на большинство случаев.
В этой статье нет цели привести все варианты центровки и переписать то, что уже где-то есть. Не помню уже почему, но меня часто не устраивали предлагаемые варианты. Либо там были фиксированные блоки либо все слетало при адаптивной вёрстке либо ещё какие недостатки.
Иногда для выравнивания по центру достаточно добавить пару атрибутов и не нужно ничего сложного городить. Например, так я центрировал рекламу РТБ от Яндекс.
Ниже несколько вариантов адаптивной вёрстки выравнивания блоков по центру, которые я использую на своих сайтах. И если первый достаточно распространённый, то возможно, какие-то другие способы даже не будут описаны в Интернете именно таким образом.
Вариант 1
Простое выравнивание всех блоков по центру страницы.
Отцентрируем содержимое UL из 4 элементов LI, которые находятся в блоке DIV с классом container.
В таком случае в CSS достаточно следующих правил:
.container ul text-align: center;
list-style: none;
>
.container li display: inline-block;
>
Получим следующий вид:
Если блоки LI с этими свойствами не устанавливаются по центру, значит какое-то другое свойство им мешает. Например, это может быть свойство float:left или display: table; или какое-то иное.
Теперь верхнюю структуру (в базовый каркас выравнивания CSS) можно добавить и другие стили. Например, сделать фиксированного размера блоки и отступы друг от друга:
.container li <
display: inline-block;
margin: 5px;
width: 100px;
>
Но в таком варианте есть один минус. Блоки расположены по центру, но слева и справа огромные расстояния. Их можно уменьшить изменяя width.
А можно сделать контейнеры одинакового размера так, чтобы отступы были только между контейнерами, а слева и справа их не будет.
Тогда мы уберём margin и добавим ширину такого width, чтобы он полностью покрывал область.
.container li <
vertical-align: top;
display: inline-block;
width: 32.899%;
>
Между блоками останется небольшой участок пустого пространства. А чтобы его сделать ещё больше, можно отступать внутри с помощью параметра padding.
В блоках я специально не добавляю ничего лишнего, чтобы оставить ровно те стили которые непосредственно влияют на выравнинвание. Но если вы сделаете тоже самое, то такие блоки не получить. Хотя бы потому что, во-первых, нужно добавить цвет к блоку, а во-вторых, если он пустой поставить height: 100px;. Другие атрибуты уже по своему вкусу.
Итоговый вариант такой:
В приведенном скриншоте выше я оставил другие участки сайта, чтобы было понятно, где границы блоков, потому что если они прилегают к краю, то самого края уже не видно. А на картинке белые края слева и справа — это уже другая центровка, не имеющая ничего общего с рассматриваемым примером. Повторюсь, сами блоки прилегают к краям, которых не видно, потому что блоки их полностью покрывают.
Вариант 2
Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:
Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?
Имеем следующую структуру:
Блок 1Блок 2
Блок 3
Блок 4
Блок 5
