Как выровнять текст по середине в css
Перейти к содержимому

Как выровнять текст по середине в css

  • автор:

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

Как выровнять текст по центру блока? Для блока родителя прописано justify-content: center, но в итоге не работает, а text-align: center выравнивает текст не так, как мне надо. В прикрепленной картинке показано, как все должно выглядеть PS данная секция называется .features Сам сайт ch38740.tmweb.ru Весь код https://jsfiddle.net/0jsar8ke/

.features-desc
 
Why Frispes

We revolutionize your workspace

With a decade of insights and expertise, we're decided to reimagine co-working space, designed to help a new startup grow up and realize their ideas so they can give a positive impacts on many people

Как у меня введите сюда описание изображения Как надо введите сюда описание изображения

Выравнивание текста по центру 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 ? 3 мая 2020 в 16:13

@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. Может в его свойства что-либо прописать?

Размещение текста по центру экрана

Друзья, подскажите наиболее кросс-браузерное решение по размещению текста на странице по центру окна браузера (на всякий случай, поясню: это когда отступы сверху, снизу, слева и справа от границ окна до текста попарно одинаковые). Заранее, спасибо!

  • Вопрос задан более трёх лет назад
  • 64640 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 7

В общем случае решения нет, зато есть куча частностей.

Если текст в одну строку и есть возможность использовать абсолют (что далеко не всегда)то —
position:absolute;
width:100%;
top:50%;
text-align:center;

Если известна высота блока и можно использовать абсолют, то вариант предложенный выше.

Если нельзя использовать абсолют, но известна высота блока и текст в одну стоку — то через line-height равный высоте блока.

Ну и 100% кроссбраузерная классика о которой вечно все забывают — зафигачить таблицей с одной ячейкой.

Выравнивание по центру в CSS: приёмы, свойства, подводные камни

Как расположить что угодно по центру чего угодно с помощью каскадных таблиц стилей.

Иллюстрация: Оля Ежак для Skillbox Media

Иван Стуков

Иван Стуков
Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

CSS существует и развивается с 1996 года. За четверть века и три редакции в этом языке появилось много разных способов отцентрировать элемент — как костыльных, так и каноничных.

В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.

  • С помощью Flexbox
  • Через автоотступы
  • С помощью inline-блоков
  • Выравнивание нескольких элементов
  • С помощью Flexbox
  • С помощью свойств position и transform
  • Ячейки таблицы
  • С помощью Flexbox
  • С помощью свойств position и transform
  • Через CSS Grid
  • Центрирование текста по горизонтали
  • Центрирование текста по вертикали
  • Как выровнять заголовок, список или форму
  • Как центрировать блок
  • Как разместить блок посередине страницы
  • Выравнивание картинок и кнопок по центру

Горизонтальное центрирование

Как работают способы из этого раздела, мы покажем на примере блоков div, однако применять их можно и к другим элементам: заголовкам, абзацам, изображениям, кнопкам, формам, спискам и так далее.

Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.

С помощью Flexbox

Добавьте в родительский элемент свойства display: flex, чтобы сделать элемент flex-контейнером, и justify-content: center, чтобы контент внутри контейнера расположился посередине горизонтальной оси. Обратите внимание: justify-content действует только на flex-элементы, поэтому без display: flex он не заработает.

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

Через автоотступы

Добавьте свойства margin-left: auto и margin-right: auto — они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:

Преимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае это body).

Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.

С помощью inline-блоков

Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.

Несмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными — с помощью display: inline-block.

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

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

Каждый из трёх способов будет вести себя по-разному, если мы будем размещать по центру сразу несколько элементов. Возьмём один и тот же HTML-код и последовательно применим к нему описанные выше методы:

С автоотступами каждый блочный элемент помещается в отдельную строку:

Инлайн-блоки остаются в одном ряду, но у них будет разная высота (у каждого — по размеру контента). Плюс текст в них автоматически выравнивается по центру.

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

При горизонтальном центрировании легко определить ширину родительского элемента: если она не задана явно, то обычно равна ширине экрана. При вертикальном центрировании всё немного сложнее: высоту родительского элемента приходится задавать явно с помощью свойства height.

Как и в прошлом разделе, мы будем показывать работу всех методов на примере блоков div и добавим те же границы: синие — для родительских и чёрные — для дочерних элементов. Во всех примерах будем использовать один и тот же HTML-код:

С помощью свойств position и transform

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

Родительскому элементу нужно присвоить свойство position: relative, а дочернему — position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.

Обратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе — по вертикали.

Если по какой-то причине вы не хотите использовать свойство transform, вместо него можно поставить margin. Но для этого необходимо знать размер дочернего элемента и установить отрицательный margin-top, равный половине его высоты.

Ячейки таблицы

Добавьте в родительский элемент display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle — это свойство центрирует содержимое блока по вертикали.

Это довольно костыльный и не очень удобный способ. Так как ячейка находится вне таблицы, мы не можем корректно управлять её шириной. Для этого нужно создать родительский элемент со свойством display: table и задавать width уже внутри него.

Выравнивание по центру

Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.

Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.

С помощью Flexbox

Чтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:

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

При желании также можно использовать флексбоксы, но это менее удобно, потому что в таком случае придётся явно задавать родительский элемент.

Центрирование текста по вертикали

Все способы вертикального центрирования можно использовать и для выравнивания текста. В приведённых ниже примерах голубой рамкой выделены родительские элементы.

Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.

Позиционирование. Если применить к элементу свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.

Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.

Ячейки таблицы. Здесь так же, как и в случае с флексбоксами, нужно задать стиль только для родительского элемента.

Как выровнять заголовок, список или форму

К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.

Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.

Как центрировать блок

Когда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:

  • Горизонтальное центрирование
  • Вертикальное центрирование
  • Выравнивание по центру

Как разместить блок посередине страницы

Чтобы поставить блок в центре веб-страницы, можно использовать любой из перечисленных выше способов. Однако будет два различия:

  • в качестве родительского элемента выступает всё тело веб-страницы (элемент );
  • необязательно явно указывать высоту блока.

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

Flexbox. Недостаток этого подхода в том, что такая страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нам нужны.

При выравнивании с помощью Flexbox изображения или кнопки могут вести себя необычно. Вот в каких случаях это происходит:

  • задана высота родительского блока;
  • не заданы размеры картинки;
  • не указано свойство align-items.

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

В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.

Резюмируем

Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:

  • Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
  • Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
  • Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.

Больше интересного про код в нашем телеграм-канале. Подписывайтесь!

Читайте также:

  • Селекторы в CSS: что это такое, как они работают и какие бывают
  • Заняться фронтенд-разработкой в 12 лет, выиграть IT‑чемпионат в 13: история Али Сулейманова
  • Учимся верстать: что такое CSS

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

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