Не получается спозиционировать элемент по центру и в конце страницы

Question

Всем привет. Как спозиционировать элементы как показано на скриншоте? Прошу обратить внимание, что использовать абсолютное позицинирование или функцию translateX() не приведёт к желаемому результату. Шапка должна быть резиновая, то есть при масштабировании текст ужимается к левой части страницы. При использовании вышеперечисленных способов результат будет, увы, отрицательный.

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iRobot</title>
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
    <!-- STYLES -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/colors.css">
    <link rel="stylesheet" href="styles/header.css">
</head>
<body>
<div class="header-container">
<!--    <div class="header">-->
        <div class="header-carousel">
            <div class="carousel-item">Order by 12/19/24 at 11:59 PM EST for 2-day shipping on all robot orders for
                delivery
                by 12/24/24.
                <a href="https://www.irobot.com/en_US/deals.html" target="_blank">Select preferred shipping option at
                    checkout.</a></div>
            <div class="carousel-item carousel-item-hidden">New Markdown: 45% off the Roomba Combo® i5+ Self-Emptying
                Robot
                Vacuum and Mop. <a href="https://www.irobot.com/en_US/roomba-combo-i5-series-robot-vacuum-and-mop/Roomba-Combo-i5-Series-Robots.html">Shop Deal</a>
            </div>
        </div>
        <div class="header-link">
            <a href="https://homesupport.irobot.com/s/">Support</a>
            <a href="https://www.irobot.com/en_US/login">Order Status</a>
            <a href="https://www.irobot.com/en_US/login">Login</a>
            <span class="header-language">English (United States)</span>
        </div>
<!--    </div>-->
</div>

<script src="scripts/header.js"></script>
</body>
</html>

CSS:

.header-container {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    background-color: var(--background-header);
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: clamp(100px, 100%, 500px);
}

.carousel-item {
    text-align: center;
}

.carousel-item-hidden {
    display: none;
}

Answer 1

Вот получилось. Всё сделал justify-content:flex-end и задал центральной карусели max-width, что бы оно не сужалось, а заполняло пустой промежуток слева. этот max-width вам придётся подобрать самостоятельно в зависимости от размера меню и внешнего контейнера, что бы изначально была видимость, что он стоит ровно по центру.

.header-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 2.5rem;
    background-color: var(--background-header);
    border: 1px solid black;
    padding: 5px;
    gap: 5px;
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-carousel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 315px;
    border: 1px solid black;
}

.carousel-item {
    text-align: center;
}

.header-link {
  border:1px solid black;
}

.carousel-item-hidden {
    display: none;
}

<div class="header-container">
<!--    <div class="header">-->
        <div class="header-carousel">
            <div class="carousel-item">Order by 12/19/24 at 11:59 PM EST for 2-day shipping on all robot orders for delivery by 12/24/24.
          </div>
        </div>
        <div class="header-link">
            <a href="https://homesupport.irobot.com/s/">Support</a>
            <a href="https://www.irobot.com/en_US/login">Order Status</a>
            <a href="https://www.irobot.com/en_US/login">Login</a>
        </div>
<!--    </div>-->
</div>

БЛОГ НА HUSL

Не получается спозиционировать элемент по центру и в конце страницы

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