Как выровнять по центру страницы 2-й flex-элемент из 4-х при justify-content: space-between;?

Question

[safo4eg]

Как выровнять второй элемент flex-контейнера (MYCOMPANY) по центру контент-блока?

<div class="page">
            <header class="header">
                <div class="container">
                    <nav class="menu">
                       
                        <ul class="menu__ul">
                            <li class="menu__li">Products<a class="menu__link" href="#"></a></li>
                            <li class="menu__li">About<a class="menu__link" href="#"></a></li>
                            <li class="menu__li">Blog<a class="menu__link" href="#"></a></li>
                            <li class="menu__li">Contacts<a class="menu__link" href="#"></a></li>
                        </ul> <!-- menu__ul -->
                        
                        <a class="menu__logo" href="index.html">MYCOMPANY</a>
                        
                        <a class="menu__signup" href="#">Sign Up</a>
                        <a class="menu__login" href="#">Login</a>
                        
                    </nav> <!-- menu -->
                </div>
            </header>
        </div>

/* CSS */
.menu {
    display: flex;
    justify-content: space-between;
}

.menu__ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    display: flex;
}

.menu__li:nth-child(n + 2) {
    margin-left: 40px;
}

В голову приходит только через позиционирование абсолютное, 50% от container, но как половину ширины еще вычислить и вычесть от этого элемента? Может есть какие-то способы попроще? Ну конечно, еще в голову пришло элемент SIGN UP и LOGIN в контейнер-flex тоже запихнуть и тогда у трех элементов второй окажется по центру, но в домашке у меня именно чтоб только список ul был flex-контейнером и тег nav flex-контейнером, а остальные как ссылки без обёрток

Answer 1

[Nikolay Matyushkin]

Поделите хэдер на 3 блока (меню, MYCOMPANY и блок с signup и login).
Левому и правому задайте ширину в 100% и тогда средний блок окажется строго по середине

Comments

[safo4eg]

Это гениально, спасибо!