Faced such a task: the red inline-block some reason does not want to center on the center of the vertical-align: middle; and goes beyond its boundaries - why and how can this be solved?

 .wrapper { height: 100px; } .class-1 { display: inline-block; width: 60%; height: 100px; background-color: black; } .class-2 { display: inline-block; vertical-align: middle; width: 20%; height: 50px; background-color: red; } .class-3 { display: inline-block; vertical-align: top; width: 20%; height: 80px; background-color: blue; } 
 <div class="wrapper"> <div class="class-1"></div><div class="class-2"></div><div class="class-3"></div> </div>

  • vertical align generally whimsical devil sorry, I can’t help much, but here the described features of using it web-standards.ru/articles/vertical-align do not kick much, I am from a pure heart - Dragonborn

1 answer 1

You can solve by adding vertical-align:middle first block.

 .wrapper { height: 100px; } .class-1 { vertical-align: middle; display: inline-block; width: 60%; height: 100px; background-color: black; } .class-2 { display: inline-block; vertical-align: middle; width: 20%; height: 50px; background-color: red; } .class-3 { display: inline-block; vertical-align: top; width: 20%; height: 80px; background-color: blue; } 
 <div class="wrapper"> <div class="class-1"></div><div class="class-2"></div><div class="class-3"></div> </div>