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

#html #css

Как и многие использую 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!
     




    

Ответы

Ответ 1

Думаю, топикстартер уже разобрался с данной проблемой, но, возможно, это решение
пригодится кому-то еще. 

Чтобы вертикально центрировать блок, используя псевдоэлемент :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!
     



Ответ 2

Для вертикального выравнивания уже можно использовать flex-box. Он уже достаточно
широко поддерживается браузерами.

Свойство margin со значением auto применимое к ребенку flex-родителя - будет выравнивать
как по горизонтали так и по вертикали



#parent{
  display: flex; 
  height:300px;
  border: 1px solid red;
}

#parent .child {
  width: 33.3%;
  height:30px;
  border:1px solid black;
  margin: auto; 
}

  
ребенок
   
ребенок
  
ребенок