Почему не работает vertical-align: middle?

Question

[Alex931]

Здравствуйте. Не работает vertical-align: middle;
Вот такая конструкция:

<div>
<a href="">
<svg></svg>
</a>
</div>

.div {
height: 100%; */
    width: 16.5%;
    background: #21477e;
    border: 1px solid #0561a4;
    border-radius: 7px;
    height: 72px;
    display: flex; 
    vertical-align: middle;
}
a {
    display: flex;
    vertical-align: middle;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: #fff;
    padding-left: 13px;
    padding-right: 12px;
}

Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?

Comments

[Ankhena]

Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?

vertical-align для дочерних элементов флексов работать не будет, потому что они блочные.
И работает это свойство не так, как вы предполагаете.

https://web-standards.ru/articles/vertical-align/

У вас там флекс, значит логично использовать свойства флексов. В вашем случае align-items или align-self.

Answer 1

[Сергей delphinpro]

Это свойство для inline элементов. причем применяется оно непосредственно к элементу, а не его родителю (у вас к обоим почему-то).
У вас ссылка имеет стиль display: flex, а значит является блочной.
Можете использовать display: inline-flex, чтобы сделать элемент инлайновым (Хотя это не поможет, так как элемент являтся прямым потомком флекс-контейнера, и всегда будет блочным).
Или, раз уж у вас див является флекс-контейнером, использовать flex-свойства.

div {
  display: flex;
  align-items: center;
}