@Alex931

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

Здравствуйте. Не работает 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. В чем причина?
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Это свойство для inline элементов. причем применяется оно непосредственно к элементу, а не его родителю (у вас к обоим почему-то).
У вас ссылка имеет стиль display: flex, а значит является блочной.
Можете использовать display: inline-flex, чтобы сделать элемент инлайновым (Хотя это не поможет, так как элемент являтся прямым потомком флекс-контейнера, и всегда будет блочным).
Или, раз уж у вас див является флекс-контейнером, использовать flex-свойства.

div {
  display: flex;
  align-items: center;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы