Align inline-block in block vertically

Today, 4th December 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putinโ€™s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.
<div class="out">
  <div class="in">Inline</div>
.in {
  display: inline-block;
  vertical-align: middle;
  background: green;
  height: 20px;
  width: 100px


.out {
  background: #ADD8E6;
  height: 80px;

.out:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;


Ivan Borshchov profile picture
May 31, 2017
by Ivan Borshchov
Did it help you?
Yes !

Best related