Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

Выравнивание сложных элементов по базовой линии

У меня есть строка, в строке есть пачка элементов с разным фоном и разным размером текста, и стоит две задачи:
растянуть фон этих элементов на всю высоту строки выровнять весь текст по baseline (причём из-за того, что снизу есть бордер, надо бы его сместить чуть ниже центра блока, чтобы казалось выровненным по центру)
То есть хочу что-то такое:

Изначально я сделал это тупо многочисленными паддингами, но потом стало нужно сделать адаптивную вёрстку с переменной высотой, и поддерживать паддинги это уже какой-то адок. Надо бы что-нибудь менее костыльное, чтобы высоту строчки можно было произвольно менять, и при этом ничего не разъезжалось.
По отдельности обе задачи решить — раз плюнуть. Можно растянуть блоки на всю высоту, но тогда съезжает выравнивание текста по вертикали. Можно выровнять текст по вертикали, но тогда фон нельзя будет растянуть. И вот что-то у меня не получается надумать, как решить всё и сразу.
Сниппет с выравниванием, но без фона:
.myblock { background-color: #fdd; height: 44px; border-bottom: 15px solid #ccf; } .myitem { display: inline-block; vertical-align: baseline; background-color: #ddf; } .myitem1 { font-size: 14px; } .myitem2 { font-size: 28px; margin-top: 10px; } .myitem3 button { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 18px; background-color: white; }

Мелкие букофки
Бальщие букафки


Ответ

Путём многочасовых размышлений нашёл-таки кое-какое решение своей проблемы. Суть такова:
контейнеру задаём желаемые font-size и line-height — с помощью них устанавливается положение базовой линии. Внутрь пихаем div'ы высотой с контейнер. font-size и line-height наследуются, как и сама базовая линия. Фон устанавливается именно здесь и получается на всю высоту. Внутрь div'ов пихаем span'ы, задаём им нужный размер шрифта и сбрасываем line-height. Так как span является inline-элементом, базовая линия наследуется, и текст будет выровнен именно по ней независимо от установленного здесь размера шрифта. На этом можно было бы закончить, но я вспомнил, что мне нужна кнопка на всю высоту. Однако в кнопке текст выравнивается не по базовой линии, а по центру относительно высоты кнопки (как минимум в Firefox), из-за чего кнпока постоянно норовит куда-то уехать. Поэтому придётся запихать в кнопку два span друг в друга: первый будет inline-block и растягивается на всю высоту (аналогично div описанному выше) — он сбрасывает выравнивание текста по вертикали; а второй уже содержит нужный текст с нужным размером. Сама кнопка тоже растянута на всю высоту и имеет vertical-align: top, чтобы никуда не съезжать.
После этого можно произвольно менять высоту всей этой конструкции с помощью замены height, line-height и font-size у контейнера на нужные значения. (Проценты не проверял, но мне и не надо). Как-то так:
.myblock { background-color: #fdd; height: 44px; border-bottom: 15px solid #ccf; font-size: 16px; /* подбирается методом тыка */ line-height: 59px; /* height + border */ } .myitem { display: inline-block; vertical-align: baseline; background-color: #ddf; height: inherit; } .myitem1 > span { font-size: 14px; line-height: 1.25; } .myitem2 > span { font-size: 28px; line-height: 1.25; } .myitem3 button { margin: 0; padding: 0; border: 0; font-family: inherit; background-color: white; height: inherit; line-height: inherit; font-size: inherit; vertical-align: top; } .myitem3 button > span { display: inline-block; height: inherit; } .myitem3 button > span > span { font-size: 14px; line-height: 1.25; }

Мелкие букофки
Бальщие букафки

Однако всё-то выглядит костыльневатенько; если кто-то придумает решение получше, буду рад увидеть.

Комментариев нет:

Отправить комментарий