Сделать высоту ссылки такой же, как текст

Я создал 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;
}

Ответы (1 шт):

Автор решения: tohatsu

У меня помогло добавление margin:auto

.footer__policy-link{
    margin:auto;

    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;
}
→ Ссылка