Question:
Like many others, I use before for vertical alignment. And if the element does not fit in width, it goes beyond the genus. block. What should be done in this case? Specify a width smaller than the parent? or use a minus margin on the pseudo-element?
.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; //если раскоментировать появиться нужный блок }
<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>
Answer:
I think the topicstarter has already dealt with this problem, but perhaps this solution will be useful to someone else.
To vertically center a block using the :before pseudo-element, it is not necessary to give it a negative margin , it is enough to set the parent block to font-size:0px – this will save us from the "extra" space between inline elements:
.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; }
<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>