0

Имеется такая разметка, header у нас 100vh. Хочу расставить блоки таким образом: логотип хочу поставить по центру по горизонтали, блок с текстом и кнопкой хочу прижать вниз, кнопка по центру по горизонтали. Проблема в том, что не знаю как правильно растянуть блок header__content. Как вы бы сверстали такое? Правильно ли я назвал классы?))

<header class="header">
    <div class="container">
        <a href="" class="logo">logo</a>
        <div class="header__content content-header">
            <div class="content-header__text">
                <h1>Заголовок</h1>
            </div>
            <a href="" class="btn">Кнопка</a>
        </div>
    </div>
</header>

1 ответ 1

0
<body>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }
    .header {
        height: 100vh;
    }
    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
</style>
<header class="header">
    <div class="container">
        <a href="" class="logo">logo</a>
        <div class="header__content content-header">
            <div class="content-header__text">
                <h1>Заголовок</h1>
            </div>
            <a href="" class="btn">Кнопка</a>
        </div>
    </div>
</header>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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