Как выровнять текст и картинку внутри ссылки?

Question

[oksana_melikhova]

Пробовала флексы и display: block, но именно по центру не получается поставить, чтобы картинка и текст находились на одном уровне

<div class="header__link">
  <a href="#">
    <img src="/img/src/Play button.svg" alt="Play" />
    <span>Play Demo</span>
  </a>
</div>

.header__link {
  display: flex;
  align-items: center;
}

.header__link img {
  width: 100px;
  height: 100px;
}

.header__link span {
  font-family: 'Poppins', serif;
  font-size: 17px;
  color: rgb(104, 109, 119);
  font-weight: 500;
}

У меня в вёрстке:

В макете:

Comments

[ThunderCat]

в фиддл закиньте, а то рендерить в уме напрягает...

[alexalexes]

Без песочницы тяжко, но с первого взгляда видно, что если флексом сделать не контейнер .header__link, а ссылку .header__link a в контейнере, то выравнивание сразу приручится свойствами align-items, justify-content и align-content.

[oksana_melikhova]

alexalexes,

.header__link a {
display: flex;
align-items: center;
justify-content: center;
align-content: space-between;
}

Если таким образом, то видимого эффекта так же нет, к сожалению

[Ankhena]

oksana_melikhova,

Если таким образом, то видимого эффекта так же нет, к сожалению

Проверяйте подключение стилей, кэш и т.д., потому что оно не может не дать эффекта. Либо в коде есть что-то ещё, что перебивает.

Здоровый вариант:
Убрать из кода картинку, заменить на фон или псевдоэлемент. Вероятнее второе, чтобы удобнее было работать с тенью.
Нечего этой картинке делать в разметке, да ещё и с таким альтом.
А потом всё равно флексом, как написано в комментариях выше.

Answer 1

[coubwebdev]

.header__link a{
display: flex;
align-items: center;
gap: 10px;
}

.header__link img {
width: 100px;
height: 100px;
}

.header__link span {
font-family: 'Poppins', serif;
font-size: 17px;
color: rgb(104, 109, 119);
font-weight: 500;
}

у вас флекс был на header__link, а не на кнопку