Как выровнять текст и картинку внутри ссылки?
Пробовала флексы и display: block, но именно по центру не получается поставить, чтобы картинка и текст находились на одном уровне
.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;
}<div class="header__link">
<a href="#">
<img src="/img/src/Play button.svg" alt="Play" />
<span>Play Demo</span>
</a>
</div>У меня в вёрстке:
Должно быть:
Ответы (1 шт):
Автор решения: De.Minov
1. Назначить стили
2. Убрать обёртку
→ Ссылка
Проблема в том, что вы назначаете на .header__link, а внутри находится <a> и выравнивание применяется на него.
Варианта два:
1. Назначить стили .header__link на .header__link > a:
.header__link>a {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
text-decoration: none;
}
.header__link img,
.header__link svg {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 15px 20px -5px rgba(223, 103, 87, .65);
}
.header__link span {
font-family: 'Poppins', serif;
font-size: 17px;
color: rgb(104, 109, 119);
font-weight: 500;
}<div class="header__link">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#df6757" fill-rule="evenodd" d="M10 20C15.523 20 20 15.523 20 10S15.523 0 10 0 0 4.477 0 10 4.477 20 10 20ZM8.694 13.846 13.414 11.059C14.195 10.597 14.195 9.403 13.414 8.941L8.694 6.154C7.934 5.706 7 6.29 7 7.214V12.787C7 13.71 7.934 14.294 8.694 13.846Z" clip-rule="evenodd"/></svg>
<span>Play Demo</span>
</a>
</div>2. Убрать обёртку .header__link, назначив стиль на <a>:
.header__link {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
text-decoration: none;
}
.header__link img,
.header__link svg {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 15px 20px -5px rgba(223, 103, 87, .65);
}
.header__link span {
font-family: 'Poppins', serif;
font-size: 17px;
color: rgb(104, 109, 119);
font-weight: 500;
}<a class="header__link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#df6757" fill-rule="evenodd" d="M10 20C15.523 20 20 15.523 20 10S15.523 0 10 0 0 4.477 0 10 4.477 20 10 20ZM8.694 13.846 13.414 11.059C14.195 10.597 14.195 9.403 13.414 8.941L8.694 6.154C7.934 5.706 7 6.29 7 7.214V12.787C7 13.71 7.934 14.294 8.694 13.846Z" clip-rule="evenodd"/></svg>
<span>Play Demo</span>
</a>