Я создал Footer, состоящий из трех частей flexbox: лого, ссылка политики, и соц сети. Всё работает так как надо, кроме ссылки политики. Высота ссылки такая же как у остальных элементов flexbox, а мне необходимо сделать её такой же, как текст ссылки, при том, чтобы она так же оставалась вертикально по центру.
HTML:
<footer class="footer">
<div class="wrapper">
<div class="footer__item">
<div class="footer__logo">
<a href="/" class="footer__logo-link">
<img src="./img/svg/itechacc_small.svg" alt="ITechAccSmall" class="footer__logo-pic">
</a>
</div>
<a href="#!" class="footer__policy-link">Политика конфиденциальности</a>
<nav class="footer__nav">
<ul class="footer__menu-list">
<li class="footer__menu-item">
<h3 class="footer__menu-title">Социальные сети</h3>
</li>
<li class="footer__menu-item">
<a href="#!" class="footer__menu-link">Skype</a>
</li>
<li class="footer__menu-item">
<a href="#!" class="footer__menu-link">WhatsApp</a>
</li>
<li class="footer__menu-item">
<a href="#!" class="footer__menu-link">VK</a>
</li>
<li class="footer__menu-item">
<a href="#!" class="footer__menu-link">Telegram</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
CSS:
.footer{
padding: 50px 0;
background: linear-gradient(90.43deg, rgba(120, 129, 168, 0.92) 0%, #121B2B 44.27%);
}
.footer__item{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.footer__nav{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer__policy-link{
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
text-shadow: 6px 6px 5px rgba(0, 0, 0, 0.25);
text-decoration: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
transition: opacity 1s ease-out;
}
.footer ul li a{
text-decoration: none;
}
.footer__menu-title{
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: #FFFFFF;
text-shadow: 6px 6px 5px rgba(0, 0, 0, 0.25);
margin-bottom: 5px;
}
.footer__menu-link{
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #FFFFFF;
text-shadow: 6px 6px 5px rgba(0, 0, 0, 0.25);
transition: opacity 1s ease-out;
}
.footer__policy-link:hover, .footer__policy-link:focus, .footer__policy-link:active{
opacity: .5;
}
.footer__menu-link:hover, .footer__menu-link:focus, .footer__menu-link:active{
opacity: .5;
}
margin:auto
- у меня помогло