how to put an element in the center when i am using space-between with flexbox

Question

this is my code:

<body>
    <header class="nav-header">
        <div class="logo"><img width="60" height="60" src="https://images-platform.99static.com//NMiXuAYBnve7fSNymk44pr23_8M=/86x1262:1113x2289/fit-in/500x500/99designs-contests-attachments/131/131688/attachment_131688576"></div>
        <div class="title">TITLE</div>
        <nav >
            <ul class="links">
                <li class="link"><a>LINK111111111111111</a></li>
                <li class="link"><a>LINK222222222222222</a></li>
                <li class="link"><a>LINK333333333333333</a></li>
            </ul>
        </nav>
    </header>
</body>

css:

html, body {
    width: 100%;
    height: 100%;
}

.nav-header {
    width: 100%;
    height: 10%;
    background-color: rgb(3, 3, 49);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.links {
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    margin: 0 40px;
}
.link {
    margin: 0 10px;
}

I want the <div class="title">TITLE</div> to be in the center and not like that:

how to put an element in the center when i am using space-between with flexbox

0 Answers0