Text vertical align css: How to Vertically Center Text with CSS

html — Вертикальное выравнивание по центру встроенных элементов немного отклоняется

спросил 4 года 10 месяцев назад

Изменено 4 года, 10 месяцев назад

Просмотрено 2к раз

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

Пример:

 р {
  шрифт: Arial, 10pt, без засечек;
}

.икона {
  вертикальное выравнивание: посередине;
} 

 
Это текст со значком .
 

• html
• css
• flexbox
• вертикальное выравнивание

1

Ну, это потому, что по умолчанию

высота строки применяется к элементам пользовательским агентом браузера. .. Итак, вам нужно поиграть с некоторыми значениями по вертикали … используйте text-bottom

 p {
  шрифт: Arial, 10pt, без засечек;
}

.икона {
  вертикальное выравнивание: текст внизу;
} 

 
Это какой-то текст со значком .
 

Хорошо, если вы не хотите тратить слишком много времени на vertical-align , используйте просто flexbox

 р {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  шрифт: Arial, 10pt, без засечек;
} 

 
Это какой-то текст со значком .
 

Попробуйте вертикальное выравнивание: текст сверху; .

 р {
  шрифт: Arial, 10pt, без засечек;
}
.икона {
  вертикальное выравнивание: текст сверху;
} 

 
Это текст со значком .
 

Добавить к . icon

 положение: относительное;
  слева: -2px;
 

Это переместит его на два пикселя влево от исходного положения.

 р {
  шрифт: Arial, 10pt, без засечек;
}
.икона {
  вертикальное выравнивание: посередине;
  положение: родственник;
  слева: -2px;
} 

 
Это какой-то текст со значком .
 

Я думаю, что это ваше лучшее решение:

 .значок {
  вертикальное выравнивание: посередине;
  отступ снизу: 3px;
}
 

Другие возможные решения: https://github.com/google/material-design-icons/issues/206

Надеюсь, это поможет;)

 p {
  шрифт: Arial, 10pt, без засечек;
}
.икона {
  вертикальное выравнивание: суб;
} 

 
Это текст со значком .
 

CSS: вертикальный -align свойство

---

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

Описание

Свойство CSS vertical-align определяет вертикальное выравнивание встроенного элемента или элемента ячейки таблицы.

Синтаксис

Синтаксис CSS-свойства вертикального выравнивания:

 вертикальное выравнивание: значение; 

Параметры или аргументы

значение

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

Значение для встроенных элементов

Если значение является встроенным элементом, оно может быть одним из следующих:

Значение	Описание
верх	Верх элемента и его потомки выравниваются по верху всей строки img { vertical-align: top; }
дно	Низ элемента и его потомков выравнивается по низу всей строки img { выравнивание по вертикали: снизу; }
базовый уровень	Базовая линия элемента выровнена по базовой линии его родителя img { vertical-align: baseline; }
суб	Базовая линия элемента выровнена с базовой линией нижнего индекса его родителя img { vertical-align: sub; }
супер	Базовая линия элемента выровнена с базовой линией надстрочного индекса его родителя img { вертикальное выравнивание: супер; }
текст сверху	Верх элемента выровнен по верху шрифта родительского элемента img { vertical-align: text-top; }
текст внизу	Нижняя часть элемента выровнена по нижней части шрифта родительского элемента img { vertical-align: text-bottom; }
средний	Середина элемента выровнена по середине строчных букв в шрифте родительского элемента img { вертикальное выравнивание: среднее; }
фиксированный	Базовая линия элемента выравнивается на заданную фиксированную величину выше базовой линии его родителя img { vertical-align: 5px; }
процент	Базовая линия элемента выравнивается на заданную процентную величину выше базовой линии его родителя (процент от свойства line-height) img { vertical-align: 10%; }
унаследовать	Элемент унаследует свойство вертикального выравнивания от своего родительского элемента img { vertical-align: inherit; }

Значение для ячеек таблицы

Если значение является ячейкой таблицы, оно может быть одним из следующих:

Значение	Описание
верх	Верхний край ячейки выровнен по верхнему краю строки td { vertical-align: top; }
средний	Центр поля заполнения ячейки выровнен в пределах строки td { vertical-align: middle; }
дно	Нижний край ячейки выровнен по нижнему краю строки td { vertical-align: top; }
унаследовать	Элемент унаследует свойство вертикального выравнивания от своего родительского элемента td { vertical-align: inherit; }

Примечание

• Свойство вертикального выравнивания может иметь отрицательное значение.