TGViewer
Веб-страница Веб-страница @tproger_web · 22.3K subscribers
Post #6614 934
Как удержать иконку у первой строки длинной подписи

В списке с align-items: center иконка выглядит нормально, пока подпись занимает одну строку. После переноса она оказывается посередине всего текста. Переключение на start поднимает её вверх, но не центрирует относительно первой строки.

Ахмад Шадид предлагает рассчитывать смещение через высоту строки и размер иконки: calc((1lh - var(--size)) / 2). Значение передают в translateY(). При изменении шрифта или размера значка отступ пересчитывается вместе с ними.

Для иконки в псевдоэлементе дополнительно нужны flex-shrink: 0 и квадратное соотношение сторон через aspect-ratio: 1: длинная подпись не должна сжимать значок.

В разборе с интерактивными примерами можно менять ширину списка, шрифт и размер иконки. Удобный способ проверить компонент на длинных названиях и увеличенном тексте.
  • 🔥 5
More from @tproger_web
  1. Oct 15, 2026CSS-значения можно читать в JavaScript как объекты getComputedStyle() возвращает строки. Ч…
  2. Oct 14, 2026Почему мы пишем своё, когда браузер уже умеет Разработчик ищет компонент модального окна,…
  3. Oct 14, 2026SvelteMap умеет создавать значение при первом обращении Чтобы сгруппировать элементы по кл…
  4. Oct 14, 2026Post #6611
  5. Oct 14, 2026Как задать странице список разрешённых сетевых адресов Сторонний скрипт или сгенерированны…
  6. Oct 13, 2026W3C убрал лишние обёртки из своей дизайн-системы Правила отступов, удобные для фиксированн…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →