@ZaxapKramer
Больной верстальщик

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

Здравствуйте. Относительно недавно закончил пилить сетку (из спортивного интереса) на 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 (логично:)).

Заранее спасибо за помощь. Очень надеюсь, что кто-то покажет "хороший путь" в решении данного вопроса.
  • Вопрос задан
  • 364 просмотра
Пригласить эксперта
Ответы на вопрос 1
Evanre
@Evanre
Front-end developer
Извините, а чем Вам FlexBox не угодил? Есть прекрасная сетка на нем, я даже форкнул на SASS, использую в работе ее уже год. Умеет все то, что Вам нужно и даже больше С префиксами у него сейчас отличная поддержка. Если так нужна поддержка совсем старых браузеров, есть отличный полифил для IE8-9. Все же слишком малый процент людей сейчас использует откровенно старые браузеры, чтобы ради них мучать остальных лишними костылями вроде псевдоклассов и трансформов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы