Как выровнять шрифт внутри line-height?
Доброго дня всем! Перфекционизм не дает мне покоя, шрифт отображается неровно в таблицах, устранять эту проблему падингами не хочется. Суть проблемы: шрифт внутри строки расположен чуть выше, чем нужно при любом значении line-height. Как можно идеально центрировать шрифт по вертикали? Смотрите скриншот, будет понятно
line-height: 20px
Это особенности шрифта? Возможно. Но! на циан.ру идеально ровно отображается
Шрифт Лато 2.015
Дополнительно:
Ссылку на сайт, и где конкретно искать эту строчку текста?
В CSS существует ограниченный набор свойств для непосредственного управления межстрочным интервалом или отступами непосредственно от букв. Либо это line-height, либо возня с отрицательными margin или псевдо элементами.
Ну вот и у госов теперь все "ровно":
line-height: 1;
- Не-а. У циан при line-height: 24px; все хорошо. То, что у вас над 1px сверху, 3px снизу получилось.
- pavelsa, Вы как то странно замеряете, почему Вы не берете в расчет свисающие части буквы "Д" и "у"?
- Михаил Р., считаю, что так правильнее.
- pavelsa,
считаю, что так правильнее.
Товарищ Прокруст, перелогиньтесь...
- pavelsa,
считаю, что так правильнее.
Т.е. свисающая часть буквы с первой строки войдет в заглавную букву на следующей строке?
- Михаил Р., не будет, я же ответил в комментарии к вопросу. Строки смотрятся неровно в таблицах, можно верхними отступами на пиксель сместить вниз, но такое решение не располагает. На циан именно так как хочется, не смог разобраться с чем связано, может версия шрифта отличается. В PT Sans тоже самое (расположено ровно по центру, если брать те же границы, на которые я указал)
- Михаил Р., у меня не получилось определить версию шрифта на циан, может у вас получится?
- pavelsa,
https://cdn.cian.site/frontend/fonts/h/lato-regula...
https://cdn.cian.site/frontend/fonts/h/lato-bold.c...
https://cdn.cian.site/frontend/fonts/h/lato-black....
Обычный Lato, без особых пометок. - Михаил Р., спасибо. Отмечу решением. Они корректировали сам шрифт, примерил их шрифт, все ровно.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выравнивания шрифта внутри line-height вам необходимо использовать свойство line-height в сочетании с вертикальным выравниванием текста.
Например, если вы хотите выровнять текст по центру внутри блока с заданным line-height, вы можете использовать следующий CSS код:
.container { line-height: 2; /* задаем значение line-height */ height: 100px; /* задаем высоту блока */ display: flex; /* используем flexbox для вертикального выравнивания */ justify-content: center; /* центрируем текст по горизонтали */ align-items: center; /* центрируем текст по вертикали */ }
В данном примере мы создаем блок с заданным line-height и высотой, затем используем flexbox для вертикального выравнивания текста внутри этого блока. Свойства justify-content и align-items центрируют текст как по горизонтали, так и по вертикали.
Если вам нужно выровнять текст по другим параметрам, вы можете использовать различные комбинации свойств CSS, такие как text-align, vertical-align и др. Но основной принцип остается тем же - задать line-height и применить соответствующие свойства для выравнивания текста внутри этого line-height.
Надеюсь, это поможет вам решить вашу проблему с выравниванием шрифта внутри line-height. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!