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

Question

[sleepyKitty]

Допустим, есть блок (обычный контейнер и 4 колонки)

Как видно, из-за того что картинки имеют разную высоту, блоки с текстом не выровнены относительно друг друга.

Можно использовать display:flex и align-items:baseline
Можно задать одинаковую высоту у картинок (в данном случае особо в глаза бросаться не будет)

Есть ли способ выровнять блоки не трогая флексбокс и картинки?

Answer 1

[Alex]

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

Comments

[sleepyKitty]

Вероятно вы правы. В данном случае у картинок почти одинаковая высота (разница в несколько px).
Что если одна картинка/иконка намного больше другой по высоте (скажем 30*60 vs 60*40). В таких случаях самым грамотным решением будет расположить их внутри условной области 60*60 на прозрачном фоне?

[Alex]

sleepyKitty: думаю, да. На самом деле это не сильно увеличивает вес картинки.

Answer 2

[sleepyKitty]

На основе предложенного выше варианта, подумалось, что можно обернуть каждую картинку в <div> и задать диву высоту большей из картинок. Таким образом, мы не трогаем оригинальный размер картинок и при этом получаем baseline для текста.

Comments

[Тимофей Белоусов]

залейте куда-нибудь ваш пример и я его поломаю за пару секунд (как любят делать это заказчики), возьмите мои и попробуйте повторить! Костыльщик))))))) Нате jsfiddle.net/akb4s4u0/1 , ломайте

Answer 3

[Тимофей Белоусов]

Вот как решение!

Comments

[sleepyKitty]

Все прибито гвоздями. Как позиционировать элементы я знаю. Проще юзать флексбокс, чем костыль в виде трансформа. Я надеялся найти более кросс-браузерное решение чем флексбокс. Ну и при этом без костылей ;)

[Тимофей Белоусов]

sleepyKitty: Ну во первых трансформ это не костыль, это обычно свойство, вопрос! в чем заключается костыльность трансформа? изображение само все правильно высчитывает, это теперь костыль? мда деградируем.... Далее.... Кроссбраузерность, мои пример работает до 9ie и в остальных браузерах все отлично, флекбокс не поддерживается ниже ie10, его я не использую вообще никогда, что вам еще надо?