Raz-Dva
@Raz-Dva

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

Как и многие использую before для вертикального выравнивания. И вот если елемент по ширине не влазит, он выходит за род. блок. Что нужно делать в этом случае? Указывать ширину меньше чем у родителя? или использовать минусовой margin для псевдоелемента?
<div class="parent">
      <span class="child">
  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!
     </span>
  </div>

.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; если раскоментировать появиться нужный блок*/
}


jsfiddle.net/huham/1170
  • Вопрос задан
  • 320 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ArturArturov
Можно flex использовать, можно
position: relative;
top: 50%;
transform: translateY(-50%);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽