1

Я создал 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;
}
5
  • не очень понял что нужно
    – tohatsu
    21 июл 2022 в 18:42
  • 1
    Вкратце, область ссылки больше самого текста, а мне необходимо, чтобы область ссылки была такой же как и у текста, чтобы перейти по ссылке можно было только нажав на текст, а не ниже или выше него.
    – ss1ned
    21 июл 2022 в 18:44
  • 1
    Уже пробовал, не помогает, так как мне нужна работа с display: flex;
    – ss1ned
    21 июл 2022 в 18:50
  • 1
    Поэтому-то высота ссылки такая же, как и в flexbox, а мне необходимо, чтобы она была такая же, как и текст
    – ss1ned
    21 июл 2022 в 18:51
  • 1
    margin:auto - у меня помогло
    – tohatsu
    21 июл 2022 в 18:52

1 ответ 1

1

У меня помогло добавление 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;
}
2
  • 1
    Да, то что надо, спасибо большое
    – ss1ned
    21 июл 2022 в 18:54
  • всегда пожалуйста)
    – tohatsu
    21 июл 2022 в 18:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.