Как и многие использую 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; //если раскоментировать появиться нужный блок
}
Ответ
Думаю, топикстартер уже разобрался с данной проблемой, но, возможно, это решение пригодится кому-то еще.
Чтобы вертикально центрировать блок, используя псевдоэлемент :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;
}
Комментариев нет:
Отправить комментарий