Как выровнять картинки по центру?

Question

[takverstak]

Есть такой код: https://jsfiddle.net/np8byv6u/5/
Видно что картинки выровнены по нижнему краю. Как сделать по центру? p вроде строчный блок и на него vertical-align должен действовать, но где-то я косячу...

<div class="main">
  <div class="item"><p><img src="" width="30" height="80"></p>sdfsdfsdf</div>
  <div class="item"><p><img src="" width="30" height="20"></p>sdfsdfsdf</div>
  <div class="item"><p><img src="" width="30" height="70"></p>sdfsdfs</div>
  <div class="item"><p><img src="" width="30" height="30"></p>sdfsdfsdf</div>
</div>

.main{
    font-size: 0px;
}
.item {
  width: 25%;
  display: inline-block;
  text-align: center;
  font-size: 1rem;
}
.item > p {
  vertical-align: middle;
}
.item > p > img {
  vertical-align: middle;
}

Comments

[Одиночка Айс]

Никому он ничего не должен без фиксированной высоты

[Одиночка Айс]

Вот, попробуйте посмотреть решение (взято с enSO) - jsfiddle.net/kizu/4RPFa/4570

Answer 1

[ⓒⓢⓢ]

vertical-align: middle;
выравнивает относительно родителя. А родитель в данном случае ".item", старается быть как можно меньше и места совсем нет для вертикального выравнивания ...
Расширить ".item" \\ или vertical-align: middle; для ".item"