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

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

  • автор:

Выравнивание по вертикали в

Решил написать разметку для сайта, тематика: «Онлайн буклет одежды». Столкнулся с проблемой: в теге li нельзя выровнять по центру по вертикали, только по горизонтали. Прочитал кучу туторов и все как один говорят: установить display: inline-table; и vertical-align: middle; , но ничего не работает. В чём может быть проблема?

.Content < background-color: #f7f7f7; width: 600px; height: 100%; border-radius: 0 20px 20px 20px; float: left; >.categories < float: left; border-radius: 20px 0 0 20px; background-color: #f7f7f7; width: 200px; height: 800px; >.CategoryReference < font-size: 14pt; margin: auto; color: #04c; text-decoration: none; >ol < padding: 0px; padding-top: 18px; list-style: none; >li < display: inline-table; width: 100%; height: 36px; border-bottom: 1px solid #38546F; text-align: center; vertical-align: middle; >#resourceLinks a:visited < color: #04c; >a:visited < color: #5a7bad; >a:link < color: #04c; >a:hover

Отслеживать

68k 222 222 золотых знака 79 79 серебряных знаков 222 222 бронзовых знака

Вертикальное выравнивание текста внутри flexbox

    ), содержащий элементы списка (
  • ), в которых есть текст. Стандартное поведение HTML приводит к тому, что текст внутри
  • будет выравниваться по верхнему краю.

ul < height: 100%; >li

Для достижения цели вертикального выравнивания текста внутри flexbox, можно использовать свойство CSS display: flex; . Это свойство делает элемент контейнером flexbox и позволяет использовать свойства flexbox для выравнивания содержимого.

В данном примере используются два свойства flexbox: align-items и justify-content . Align-items контролирует выравнивание элементов flexbox по вертикали (если основная ось горизонтальна), а justify-content — по горизонтали. Значение center для обоих свойств обеспечивает центрирование содержимого элемента списка по обоим направлениям.

Таким образом, использование flexbox позволяет легко и просто вертикально выравнивать текст внутри контейнера.

Как мне вертикально выровнять текст с помощью CSS?

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

Более универсальный подход

Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но все еще требует контейнера фиксированной высоты:

div < height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; >span
 
Hello World!

CSS просто измеряет размеры

, вертикально выравнивает , устанавливая высоту строки

равной его высоте, и делает встроенным блоком с vertical-align: middle . Затем он устанавливает высоту строки обратно в нормальное значение для , поэтому его содержимое будет естественным образом течь внутри блока.

Моделирование отображения таблицы

И вот еще один вариант, который может не работать в старых браузерах, которые не поддерживают display: table и display: table-cell (в основном, только Internet Explorer 7). С помощью CSS мы имитируем поведение таблиц (так как таблицы поддерживают вертикальное выравнивание), и HTML такой же, как и второй пример:

div < display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; >span
 
Hello World!

Использование абсолютного позиционирования

Эта техника использует абсолютно позиционированный элемент, устанавливающий верхнюю, нижнюю, левую и правую точку до 0. Более подробно описано в статье в журнале Smashing, Абсолютное горизонтальное и вертикальное выравнивание в CSS .

 
Hello World!

Поделиться 14 января 2012 в 21:26

Другой способ (который еще не упоминается здесь) — с помощью Flexbox. Просто добавьте следующий код к элементу container:

display: flex; justify-content: center; /* Align horizontal */ align-items: center; /* Align vertical */ 

Демонстрация Flexbox 1

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

В качестве альтернативы, вместо выравнивания содержимого через контейнер, flexbox также может центрировать элемент flex с автомаргином когда в контейнере flex есть только один элемент flex (как в примере, приведенном в вопросе выше). Таким образом, чтобы центрировать элемент flex как по горизонтали, так и по вертикали, просто установите его с помощью margin:auto

Демо Flexbox 2

.box < height: 150px; width: 400px; background: #000; font-size: 24px; font-style: oblique; color: #FFF; text-align: center; padding: 0 20px; margin: 20px; display: flex; >.box span
 
margin:auto on a flex item centers it both horizontally and vertically

Примечание: Все вышеперечисленное относится к центрированию элементов при их размещении в горизонтальных строках. Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction равно row . Если, однако, flex-items нужно разместить в вертикальных столбцах, то flex-direction: column должен быть установлен на контейнере, чтобы установить главную ось в качестве столбца, а дополнительно свойства justify-content и align-items теперь работают на другом месте с justify-content: center в вертикальном центрировании и align-items: center в горизонтальном центрировании)

flex-direction: column демонстрация

.box < height: 150px; width: 400px; background: #000; font-size: 18px; font-style: oblique; color: #FFF; display: flex; flex-direction: column; justify-content: center; /* vertically aligns items */ align-items: center; /* horizontally aligns items */ >p
 

When flex-direction is column.

"justify-content: center" - vertically aligns

"align-items: center" - horizontally aligns

Хорошим местом для начала с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузеров, являются flexyboxes Кроме того, поддержка браузеров в настоящее время очень хороша: caniuse Для совместимости с браузерами для display: flex и align-items , вы можете использовать следующее:

display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 

Поделиться 06 марта 2014 в 08:15
Вы можете легко сделать это, добавив следующий кусок CSS кода:

display: table-cell; vertical-align: middle; 

Это означает, что ваш CSS, наконец, выглядит так:

 
Some text

Поделиться 14 января 2012 в 21:29
Для справки и для добавления более простого ответа: Чистый CSS:

.vertical-align

Или как смесь SASS/SCSS:

@mixin vertical-align

Используйте:

.class-to-center

По сообщению в блоге Себастьяна Экстрема Вертикальное выравнивание чего-либо только с помощью 3 строк CSS : Этот метод может привести к размытию элементов из-за того, что элемент размещается на «половине пикселя». Решением для этого является установка родительского элемента на сохранение-3d. Как показано ниже:

.parent-element

Мы живем в 2015+ году, и Flex Box поддерживается каждым крупным современным браузером. Это будет способ создания веб-сайтов отсюда. Изучите это!

Поделиться 25 октября 2014 в 18:12

Всех признаний заслуживает владелец этой ссылки @Sebastian Ekström Ссылка; пожалуйста, перейдите по этому. Смотрите это в действии codepen. Прочитав вышеуказанную статью, я также создал демонстрационный пример. С помощью всего трех строк CSS (без учета префиксов вендора) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что мы хотим, даже если мы не знаем его высоту. Свойство CSS transform обычно используется для поворота и масштабирования элементов, но с его функцией translateY мы теперь можем вертикально выравнивать элементы. Обычно это нужно делать с помощью абсолютного позиционирования или установки высоты строки, но это требует, чтобы вы знали высоту элемента или работали только с однострочным текстом и т.д. Так что, чтобы сделать это, мы пишем:

.element

Вот все, что вам нужно. Это технология, похожая на метод абсолютного расположения, но с учетом того, что нам не нужно устанавливать никакую высоту для элемента или свойства позиции на родительском элементе. Она работает прямо из коробки, даже в Internet Explorer 9! Чтобы сделать ее еще проще, мы можем написать ее как миксин с ее префиксами поставщика.

Поделиться 11 августа 2014 в 11:59
С помощью флексбоксов CSS3 есть крохотная магия:

/* Important */ section < display: flex; display: -webkit-flex; >section p < /* Key Part */ margin: auto; >/* Unimportant, coloring and UI */ section < height: 200px; width: 60%; margin: auto; border-radius: 20px; border: 3px solid orange; background-color: gold; >section p
 

I'm a centered box!
Flexboxes are great!

    Только по вертикали:
margin: auto 0; 
margin: 0 auto; 

Как я заметил, этот трюк также работает с сетками (т.е. display: grid ).

Поделиться 13 декабря 2016 в 20:09

Вот еще один вариант использования Flexbox.

#container < display: flex; height: 200px; background: orange; >.child
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, nemo.

Результат

Enter image description here

Вот отличная статья о центрировании в CSS. Проверьте это.

Поделиться 25 ноября 2018 в 12:26

Гибкий подход

div < width: 250px; min-height: 50px; line-height: 50px; text-align: center; border: 1px solid #123456; margin-bottom: 5px; >span
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.

Поделиться 28 августа 2014 в 10:11

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

Поделиться 28 февраля 2018 в 06:25

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

html, body < height: 100%; margin: 0; padding: 0; width: 100%; >body < display: table; >.centered-text
 

Yes, it's my landing page

Under construction, coming soon.

Результат вышеуказанного фрагмента кода выглядит следующим образом:

Enter image description here

Поделиться 28 мая 2017 в 07:41

Решение, принятое как ответ, идеально подходит для использования line-height , такой же как высота div, но это решение не работает идеально, когда текст обернут ИЛИ находится в двух строках.

Попробуйте это, если текст обернут или находится на нескольких строках внутри div.

Для получения дополнительной информации см.:

  • Вертикальное выравнивание многострочного текста
  • 6 Методов вертикального выравнивания с помощью CSS

Центрируй, властвуй, располагай

Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech.

Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами.

Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать).

Существует множество способов, как нужно отцентрировать элемент, в тех или иных ситуациях, каждый способ по своему хорош.

В этой статье я разберу следующие виды центрирования:

— Горизонтальное центрирование;
— Вертикальное центрирование;
— Горизонтальное и вертикальное центрирование.

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

1. Данное свойство подходит только для инлайновыйх (inline) элементов, достаточно указать text-align: center родителю.

2. Для центрирования блочных элементов свойство text-align: center уже не подойдет. Есть простое распространённое свойство margin: 0 auto. Всё, что нам нужно, это знать ширину блока, а свойство margin 0 auto задаст следующие значения: сверху и снизу будет 0, а по бокам размеры будут заданы автоматически и блочный элемент встанет по центру.

3. Центрирование через margin это, конечно, хорошо, но есть ещё гибкое свойство display: flex. Нам нужно задать данное свойство родителю display: flex и justify-content: center — выравнивает элемент по центру.

4. Следующее свойство — это display: grid.

Алгоритм действий как с display: flex: задать данное свойство родителю и указать justify-content: center.

Сегодня свойства grid и flexbox очень популярны в web разработке. Далее я покажу, как при помощи этих свойств можно центрировать элементы по горизонтальной и вертикальной осям.

5. Сейчас я покажу необычное сочетание свойств text-align + display: inline-block.
Да, так тоже можно отцентрировать блочный элемент или элементы, если вам это необходимо. В самом первом примере я говорил, что свойство text-align применяется только для инлайновых элементов, но если мы укажем свойство блочному элементу display: inline-block, то он станет блочно-строчным. Это означает, что свойство text-align станет доступным и элемент встанет по центру.

Небольшая подсказка: display: inline-block нужно будет задавать не родительскому блоку, а каждому из блоков, к которым мы хотим применить данное свойство. И вновь показываю на примере.

Мы разобрались с горизонтальным центрированием, теперь перейдём к вертикальному.

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

1. Данное свойство подходит для таблиц — это vertical-align: middle.

При использовании этого типа центрирования нужно учитывать следующие условия:

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

2. Есть такой случай, когда высота центрируемого элемента известна, а высота родителя может быть любой. Здесь мы можем применить абсолютное позиционирование. Сейчас по пунктам разберём, что конкретно нужно сделать.

  • Задать дочернему элементу position: absolute и опустить top: 50%;
  • Так как у дочернего элемента высота может быть любая, мы должны эту высоту разделить на 2 и результат прописать в margin-top в отрицательном значении.

3. Когда нам нужно центрировать строку уже с известной высотой, мы просто можем указать line-height и указать ту же высоту.

4. Центрируем с помощью внутренних отступов (padding):

  • Элемент должен быть строчным;
  • Элемент должен помещаться в одну строку.

5. Ещё один способ вертикального центрирования с помощью vertical-align. Я рассматривал это свойство выше, но на примере с таблицами. Помимо этого, свойство ещё работает с display: inline/inline-block. Проще говоря, с инлайновыми элементами.

Вы должны учесть следующие условия:

  • Высота родителя должна быть известна, а центрируемого элемента нет;
  • Свойство line-height наследуется, поэтому надо знать корректную высоту строки.

6. Разберём еще один случай, когда высота центрируемого элемента неизвестна. Здесь нам снова поможет абсолютное позиционирование. Давайте подробно опишем, что мы должны сделать.

  • Указываем дочернему элементу position: absolute и элемент опускаем в top: 50%;
  • Затем в нашем элементе мы прописываем свойство transform: translate (-50%) и всё, наш элемент находится на центре.

7. Способ вертикального центрирования с помощью свойства display: flex. С этим свойством можно отцентровать элементы по вертикали. Для этого необходимо задать родителю следующие свойства: display: flex, flex-direction: column, justify-content: center.

8. Способ вертикального центрирования с помощью display: grid. В случае с вертикальным центрированием тут всё намного проще, чем с flexbox. Нам нужно указать родителю следующие свойства: display: grid и align-items: center

9. Следующий случай, когда высота дочернего элемента неизвестна и родитель неизвестен. Чтобы задать центрирование, нам нужно:

  • Дочернему элементу задать position: absolute, top: 0, bottom: 0, в результате чего он растянется на всю высоту внешнего блока;
  • Задаем значение margin: auto 0 дочернему элементу для вертикальных отступов внутреннего блока.

10. Заключительный способ в вертикальном центрировании: если неизвестна высота родителя и дочернего элемента, то нам поможет псевдоэлемент before.

  • Родителю указываем псевдоэлемент before, прописываем display: inline-block и указываем высоту в 100%. Таким образом мы занимаем всю допустимую высоту;
  • Центрируемый блок выравниваем по центру с помощью vertical-align: middle.

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

Пришло время для центрирования элементов по вертикали и горизонтали. Давайте рассмотрим на конкретных примерах.

1. Если есть случаи, когда высота и ширина элемента неизвестны, нужно сделать следующее: указать дочернему элементу свойства position: absolute, top: 50%, left: 50% и transform: translate(-50%, -50%).

2. Мы возвращаемся к flexbox, который выручает нас как никто другой. Нам нужно знать высоту и задать такие свойства: display flex; justify-content: center, align-items: center.

3. Grid тоже не сидит на месте: свойства почти идентичны, но мы задаем display: grid вместо flex соответственно. Перед использованием grid посмотрите поддержку данного свойства в браузерах.

4. Бывают ситуации, когда ширина и высота элемента фиксированные, а для этого нам нужно:

  • Сделать отступы с отрицательными значениями;
  • Задать position: absolute со значениями top: 50%, left: 50% это и отцентрирует элемент родителя.

5. Если мы хотим центрировать инлайновый элемент (inline, inline-block), то нам нужно свойство vertical-align. Для этого надо указать родителю псевдоэлемент before (этот пример я показывал выше), но в данном случае мы должны центрировать элементы по обе оси — вертикальной и горизонтальной. Для этого мы должны указать родителю text-align: center.

6. Ранее я уже рассказывал, как можно центрировать элементы в таблицах, но на примере с вертикальным центрированием. В случае с вертикальным и горизонтальным центрированием, вы можете вернуться к тому шагу и в добавлении указать ячейке свойство text-align: center.

Итак, мы разобрали все способы центрирования в CSS. Каждый способ уникален по своему и выбирать их нужно по ситуации. А каким из способов пользуетесь вы?

  • css
  • центрирование
  • горизонтальное центрирование
  • вертикальное центрирование

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

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