Вертикальное центрирование inline-block колонок с text-align:justify в сетке (БЕЗ flexbox)?

Question

[ZaxapKramer]

Здравствуйте. Относительно недавно закончил пилить сетку (из спортивного интереса) на inline-block'ах, которая умеет... почти все, что умеет flexbox (но без flexbox в каком-либо виде), поддерживает IE8 (или 9, если уж все настолько плохо).
Остался очень доволен. Но это удовлетворение перешло в негодование при очередном "тестировании".

Не работает нормально позиционирование элемента по-центру горизонтально (middle).

Что может быть проще vertical-align: middle, на первый взгляд? Но если знать специфику данного свойства, вряд ли можно удивиться полученному в итоге:
№1. Неудачная попытка.

А вот решение: псевдоэлемент с vertical-align: middle; display: inline-block и 100% высотой. Но не тут-то было, т.к. вылезает "баг" при использовании text-align: justify на контейнер: первый псевдоэлемент, логично, существует, поэтому "распределение блоков" смещается вправо, что можно увидеть здесь:
№2. Еще одна неудачная попытка.

Далее пробовал сделать это без псевдоэлементов. Додуматься до чего-то лучше использования

vertical-align: top;
position: relative;
top: 50%;
transform: translateY(-50%)

не смог. Это было что-то вроде прозрения: невообразимо просто и, к тому же, работает! Как же радовался я в тот миг, когда увидел своими глазами это:
№3. Казалось бы, удачная попытка.

В чем же подвох? Подвох (в третьем варианте) кроется в убирании фиксированной высоты контейнера! В итоге top: 50% перестает работать (по, на самом деле, не очень понятным мне причинам). Это вы тоже можете увидеть:
№3.1. А вот почему нам лишь "Казалось бы...".

Если задать контейнеру line-height = height (если у контейнера фиксированная высота), а для дочерних элементов задать line-height: normal, все удалось, НО. Принципиально не хочу использовать подобное решение, ибо это больше уже похоже на костыль (это и есть костыль) - это уже уход от решения:
№4. Откровенный костыль.

Есть предложения, как сделать это нормально?

Специфика вопроса (на самом деле, все просто, но проясню):
- Класс, определяющий вертикальное положение колонки, вешается на саму колонку;
- Вертикальное позиционирование никак не должно влиять на горизонтальное (все тот же text-align: justify, допустим);
- Псевдоэлементы в контейнере очень нежелательны (при вертикальном позиционировании);
- JavaScript - моветон, потому что это не CSS (логично:)).

Заранее спасибо за помощь. Очень надеюсь, что кто-то покажет "хороший путь" в решении данного вопроса.

Answer 1

[Evanre]

Извините, а чем Вам FlexBox не угодил? Есть прекрасная сетка на нем, я даже форкнул на SASS, использую в работе ее уже год. Умеет все то, что Вам нужно и даже больше С префиксами у него сейчас отличная поддержка. Если так нужна поддержка совсем старых браузеров, есть отличный полифил для IE8-9. Все же слишком малый процент людей сейчас использует откровенно старые браузеры, чтобы ради них мучать остальных лишними костылями вроде псевдоклассов и трансформов.

Comments

[ZaxapKramer]

Flexbox не для сеток. В принципе, как и все, что сделано, кроме новоиспеченного grid.
Я не говорю, что Flexbox плох, но почему не может существовать сетка на тех же таблицах (display: table)? Пусть мне и не нравится ее крайняя "ограниченность", иногда она - хорошее решение (при определенных требованиях и задачах).
А сетка из того же bootstrap3, почему нет (вполне распространенная, между прочим)?
Но я сразу подумал, зачем столько float, и нагородил "свое" на inline-block'ах, повторюсь, из спортивного интереса.

Такие сетки существуют, как узнал позже, но они все не доработаны.
В моем сборнике хаков встал вопрос с вертикальным позиционированием. В этом вопрос. Все делалось из спортивного интереса, повторюсь снова, с мыслью, что практически все то же самое можно сделать и без применения Flexbox. Здесь не ненависть к Flexbox фигурирует, а просто желание выяснить и, если что, доказать:)

[ZaxapKramer]

Дмитрий Тимофеев, пожалуйста, не надо так делать. Дело не в моем уме или его отсутствии, а в Вашем понимании причины. А о причине я твержу чуть ли не в каждом комментарии: СПОРТИВНЫЙ ИНТЕРЕС.
Я не пытался выпендриться, не пытался сказать своим вопросом, что я круче, простите, конечно.
Но Вы своим комментарием (отнюдь не умным) пытаетесь как раз сказать: "Ты глупый! Машины не летают! Либо едешь, либо идешь пешком: самолеты не придумали. Потому что никто ничего не пробовал, и все использовали Fexbox'ы в 2017".
Думаете, я не знаю? Повторюсь, причина - не выпендреж или показуха. Да, костыль. Да, извращение. Но я уже объяснил, почему взялся делать такое откровенное дерьмо. Спортивный интерес, желание проверить, а можно ли, поспорил. Вы называете меня дураком только по причине того, что я потратил немного свободного времени, чтобы применить свои мизерные знания CSS на практике таким вот образом?

И еще раз процитирую причину:

Относительно недавно закончил пилить сетку (из спортивного интереса) на inline-block'ах, которая умеет... почти все, что умеет flexbox (но без flexbox в каком-либо виде)...