vertical_align как выровнять по центру относительно родителя в inline-block элементах

Question

Тренируюсь , чтобы понять vertical-align. Пытаюсь выровнять по центру элементы li относительно класса wrapper, не могу понять почему не получается. Почему не выравнивается при vertical-align:middle;

.wrapper
{  
  background-color:black;
  height:100px;
}
.wrapper li {
  color:#fff;
  display:inline-block;
  vertical-align:middle;
}

<div class= "wrapper">
<ul>
  <li>Главная</li>
  <li>Купить пиццу</li>
</ul>
</div>

Answer 1

Вкратце - вот как работает vertical-align:

li {
  display: inline-block;
  vertical-align: middle;
}

li:nth-child(1) {
  padding: 10px;
  background: red;
}

li:nth-child(2) {
  padding: 30px;
  background: green;
}

<ul>
  <li>Главная</li>
  <li>Купить пиццу</li>
</ul>

БЛОГ НА HUSL

vertical_align как выровнять по центру относительно родителя в inline-block элементах

Ответы (1 шт):