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

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

  • автор:

Вертикальное выравнивание текста в блоке (child-helper)

Вертикальное выравнивание текста в блоке (child-helper)

Старый метод «child-helper» для выравнивания текста по вертикали в блоках с фиксированной высотой. Текст обворачивается в тег с классом .child , а за ним добавляется пустой тег с классом .helper .

Важно чтобы между тегами не было пробелов и переносов строк, как показано в примере:

CSS стили для span:
/* Вертикальное выравнивание */ .child < display: inline-block; vertical-align: middle; zoom: 1; >.helper

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

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

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

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

Как выровнять текст по центру с помощью высоты строки

Этот подход ограничен, но может быть полезен, если вы установили фиксированную высоту элемента с помощью свойства height .

Свойство line-height определяет высоту рамки, в которую браузер выводит текст. По умолчанию это значение немного больше 1, чтобы обеспечить комфортный интервал между строками текста.

Если установить для height и line-height элемента одинаковое значение, текст будет выровнен по вертикали:

image-91.png

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

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

image-94.png

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

Как выровнять текст по центру с помощью Flexbox

Лучшим, более универсальным решением является использование макета Flexbox с align-items , установленным на center .

Элемент, использующий Flexbox (гибкий контейнер), размещает элементы (гибкие элементы) либо в строку, либо в колонку. Макет Flexbox имеет две воображаемые линии, проходящие через него. Первая — это главная ось, вдоль которой будут располагаться элементы. Для флексбокса row главной осью является горизонтальная ось.

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

image-92Главная и поперечная оси в горизонтальном макете Flexbox

Вот CSS, необходимый для применения макета Flexbox и вертикального центрирования текста:

image-96.png

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

image-95.png

Вы также можете выровнять текст по вертикали с помощью CSS Grid

Для одного div , содержащего текст, который нужно выровнять по центру, вы можете превратить его в макет сетки с одной строкой и одной колонкой.

image-98.png

Если элемент, содержащий ваш текст, уже является частью макета сетки, вы можете применить align-items: center ко всей сетке, или, если вы хотите управлять вертикальным выравниванием только одной ячейки сетки, вы можете использовать align-self: center .

Заключение

Теперь вы знаете, как выровнять текст по вертикали. В следующий раз, когда вы увидите твит о центрировании div , вы можете ответить на него своими новыми знаниями CSS!

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

Если вы попытаетесь выровнять текст по вертикали по центру внутри div , используя CSS-правило vertical-align: middle; , оно у вас не сработает. Предположим, у вас есть элемент div высотой 50px , и вы поместили в него ссылку, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте div , которое составляет 50px .

Суть этого трюка заключается в том, что если значение свойства line-height больше, чем значение font-size для элемента, разница (так называемая «ведущая») уменьшается вдвое и равномерно распределяется сверху и снизу встроенного блока, который выравнивает встроенные элементы по вертикали по центру элемента.

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

    Vertically Center Text Using CSS .menu  
Home | About Us | Contact

flexbe banner 480x320 kwork banner 480x320 jivo banner 480x320

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

Похожие примеры:
  • Как разместить текст поверх изображения с помощью CSS
  • Как анимировать цвет текста при наведении курсора мыши с помощью CSS
  • Как создать эффект буквицы с помощью CSS

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

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

Проблема, по-видимому, в том, что некоторые буквы, такие как: g, y, q и т. д., которые имеют хвост, расположенный вниз, не допускают вертикального центрирования.
Вот изображение, демонстрирующее проблему: Буквы в зеленой рамке в основном идеальны, так как у них нет нисходящего хвоста.
Те, что в красной рамке, демонстрируют проблему. Я хотел бы, чтобы все символы были идеально центрированы по вертикали. На изображении символы с направленным вниз хвостом не центрированы по вертикали.
Возможно ли это исправить? Вот jsfiddle, полностью демонстрирующий проблему.

.avatar < border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; >.character
 
W
y

Свободный перевод вопроса How to vertically align all text in CSS? от участника @Chron Bag.
Отслеживать
задан 25 фев 2022 в 15:51
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака
ассоциация:stackoverflow.com/q/58924157/7394871
25 фев 2022 в 15:51

Добрый вечер, Александр, вот такой нестандартный вопрос от меня, это что-то вроде перевод английских вопросов на русском? Мне интерестно)

25 фев 2022 в 15:54

@ПростаMiha Здравствуй Михаил. Да, именно так Нахожу интересные на мой взгляд вопросы-ответы и перевожу. Но что-то в последнее время люди вяло интересуются. Хотя вот здесь реализована оч. интересная техника

25 фев 2022 в 15:58

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вот мое решение с использованием JS. Идея состоит в том, чтобы преобразовать элемент в изображение, чтобы получить его данные в виде пикселей, а затем просмотреть их, чтобы найти верх и низ каждого символа и применить translation для выполнения выравнивания. Это будет работать с динамическими свойствами шрифта.

Код не оптимизирован, но выделяет основную идею:

var elems = document.querySelectorAll(".avatar"); var fixes = []; for (var i = 0; i < elems.length; i++) < var current = elems[i]; domtoimage.toPixelData(current) .then(function(im) < /* Search for the top limit */ var t = 0; for (var y = 0; y < current.scrollHeight; ++y) < for (var x = 0; x < current.scrollWidth; ++x) < var j = (4 * y * current.scrollHeight) + (4 * x); if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) < t = y; break; >> > /* Поиск нижнего предела*/ var b = 0; for (var y = (current.scrollHeight - 1); y >= 0; --y) < for (var x = (current.scrollWidth - 1); x >= 0; --x) < var j = (4 * y * current.scrollHeight) + (4 * x); if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) < b = current.scrollHeight - y; break; >> > /* получить разницу и применить translation*/ var diff = (b - t)/2; fixes.push(diff); /* применяем translation, когда все подсчитано*/ if(fixes.length == elems.length) < for (var k = 0; k < elems.length; k++) < elems[k].querySelector('.character').style.transform = "translateY(" + fixes[k] + "px)"; >> >); >
.avatar < border-radius: 50%; display: inline-flex; vertical-align:top; justify-content: center; align-items: center; width: 125px; height: 125px; font-size: 60px; background: linear-gradient(red,red) center/100% 1px no-repeat, rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; >.character
 
W
y
a
2
o
|
@
Â
Q
~
8
ä
ç
$
>
%

UPDATE

Вот первая оптимизация кода:

var elems = document.querySelectorAll(".avatar"); var k = 0; for (var i = 0; i < elems.length; i++) < domtoimage.toPixelData(elems[i]) .then(function(im) < var l = im.length; /* Поиск верхнего предела */ var t = 0; for (var j = 0; j < l; j+=4) < if (im[j+1] == 255) < /* Поскольку мы знаем цвета, мы можем протестировать только составляющую G. */ t = Math.ceil((j/4)/125); break; >> /* Поиск нижнего предела*/ var b = 0; for (var j = l - 1; j >= 0; j-=4) < if (im[j+1] == 255) < b = 125 - Math.ceil((j/4)/125); break; >> /* получить разницу и применить translation*/ elems[k].querySelector('.character').style.transform = "translateY(" + (b - t)/2 + "px)"; k++; >); >
.avatar < border-radius: 50%; display: inline-flex; vertical-align:top; justify-content: center; align-items: center; width: 125px; height: 125px; font-size: 60px; background: linear-gradient(red,red) center/100% 1px no-repeat, rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; >.character
 
W
y
a
2
o
|
@
Â
Q
~
8
ä
ç
$
>
%

Для этого я использую плагин dom-to-image.

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

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