x
 
↑
Апрель
•
4 •

5 •

•

1 •
↓
Илья Григорьев
26 апреля 2012

Как выровнять два плавающих блока по базовой линии, если в одном из них кнопка?

Найти одинаковое компенсирующее смещение для множества браузеров и операционных систем не получится. Сдвиг зависит от размеров и отступов кнопки:

Карта Вклады Кредит
Константин Константинопольский


В таких случаях я действую кондово — клонирую распирающий элемент во вторую колонку. Текст заменяю неразрывным пробелом:

Карта Вклады Кредит
Константин Константинопольский


Прячу клон:

.button-strut {
  width: 2em;
  margin-right: -2em;
  visibility: hidden;
}
Карта Вклады Кредит
Константин Константинопольский


Колонки уравновешивают друг друга «физически».

Такой же метод поможет и в случах с разными кеглями. В качестве распорки — <span> с неразрывным пробелом большего кегля, вставленный в текст меньшего кегля:

Полиряд сложен

 Крещендирующее хождение представляет собой музыкальный аккорд, благодаря широким мелодическим скачкам. Показательный пример — разносторонняя пятиступенчатая громкостная пирамида заканчивает хорус.



Правильное расположение многострочного лейбла у чекбокса:

 

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Дмитрий Кравчик
26 апреля 2012

Я для обоих блоков просто указываю одинаковое значение line-height.
Артём Оберлянд
26 апреля 2012

Можно еще воспользоваться таблицей, в ней вертикальное выравнивание по умолчанию расположит всё посередине.
Иван Титов
26 апреля 2012

Этот приём не раз спасал меня в Ворде и Паверпоинте. Там букву не спрячешь, но её можно сделать цветом фона.
Олег Громов
26 апреля 2012

Я бы взглянул в сторону инлайн-блоков, выровненных по базовой линии — для них это стандартное поведение, но не факт, что вам подойдёт. Если, например, блоки должны прилипать каждый к своему углу (float: left и right, соответственно), то от иналйн-блоков будет больше проблем, чем пользы.
Владислав Трушин
26 апреля 2012

В таблице с vertical-align: baseline, будет все ровненько при любых размерах шрифта:

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Сайты для слабовидящих 2 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 •




Недавно всплыло

Невозможно собрать портфолио 1 • Какие законы для текста, который будет восприниматься только на слух? 1 • 1 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •