@catgraywhite

Как отцентрировать по вертикали сам текст, а не контейнеры текста, если используется несколько разных шрифтов?

Доброго времени суток! Делаю макет шапки сайта в фигме. В шапке есть название сайта и элементы меню. Название сайта одним шрифтом - Sansita, а элементы меню другим - Roboto, допустим.
Структура такая: есть главный контейнер Header, у него есть auto layout c выравниванием элементов по центру. В этом контейнере есть текстовые элементы. У этих текстовых элементов выравнивание тоже по центру. Проблемы возникают из-за того, что используются разные шрифты.
На скриншоте 1 заметно, что название сайта идёт по красной линии, а элементы меню уже идут выше красной линии несмотря на то, что сами контейнеры выровнены правильно, что видно на скриншоте 2.
63d113fcca587404966551.png
63d1148daf9f8000954333.png

Найденный мною костыль - применить функцию "Flatten" на все элементы шапки, тогда лишнее пространство вокруг текста пропадает и всё выравнивается как надо. Но в таком случае появляется другая проблема - текст превращается в набор кривых линий, не знаю как это точно назвается, и после этого изменять текст элемента уже нельзя, приходится удалять элемент, создавать на его месте текстовый элемент с изменённым текстом и снова превращать его в кривые линии.
63d114c86950a285699302.png
63d115aa28e35807548347.png

Как я могу выровнять сам текст, а не контейнеры, в которых этот текст находится? Или может быть я могу полностью обрезать лишнее пространство вокруг текста в текстовом элементе? Пытался гуглить, ничего не смог найти.
  • Вопрос задан
  • 224 просмотра
Решения вопроса 1
@itisksey
Могу предложить два решения:

1. В автолейауте есть выравнивание по базовой линии
63d11890eb186391843435.png

2. Текстовый блок положить в контейнер с тем же автолейаутом и с помощью паддингов подогнать положение текста
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы