Страницы

Поиск по вопросам

среда, 13 марта 2019 г.

Вертикальное выравнивание с помощью before, элемент не влазит?

Как и многие использую before для вертикального выравнивания. И вот если елемент по ширине не влазит, он выходит за род. блок. Что нужно делать в этом случае? Указывать ширину меньше чем у родителя? или использовать минусовой margin для псевдоелемента?
Пример
.parent { width: 200px; height: 200px; background: grey; text-align: center; overflow: hidden; } .child { background: red; height: 40px; overflow: hidden; display: inline-block; vertical-align: middle; } .parent:before { content: ""; display: inline-block; min-height: inherit; height: 100%; vertical-align: middle; margin-left: -5px; //если раскоментировать появиться нужный блок }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum, veniam alias, dolore obcaecati at illo quis consectetur quod quisquam necessitatibus? Voluptatem distinctio odio, quia rerum iusto dolore quod rem!


Ответ

Думаю, топикстартер уже разобрался с данной проблемой, но, возможно, это решение пригодится кому-то еще.
Чтобы вертикально центрировать блок, используя псевдоэлемент :before, не обязательно задавать ему отрицательный margin, достаточно задать блоку-родителю font-size:0px - это избавит нас от "лишнего" пространства между inline-элементами:
.parent { width: 200px; height: 200px; background: grey; text-align: center; overflow: hidden; font-size: 0px; } .child { width: 100%; background: red; height: 40px; overflow: hidden; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 20px; } .parent:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum, veniam alias, dolore obcaecati at illo quis consectetur quod quisquam necessitatibus? Voluptatem distinctio odio, quia rerum iusto dolore quod rem!

Комментариев нет:

Отправить комментарий