У меня есть строка, в строке есть пачка элементов с разным фоном и разным размером текста, и стоит две задачи:
растянуть фон этих элементов на всю высоту строки
выровнять весь текст по 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;
}
Однако всё-то выглядит костыльневатенько; если кто-то придумает решение получше, буду рад увидеть.
Комментариев нет:
Отправить комментарий