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 that you have read and understand our privacy policy and code of conduct.

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