Логотип в header по середине

Question

Недавно начал верстать, не нашёл ответа на свой вопрос. Как сделать логотип по центру?

@font-face {
    font-family: 'Helvetica bold';
    src: url(font/helvetica_bold.otf);
}
@font-face {
    font-family: 'Helvetica light';
    src: url(font/helvetica_light.otf);
}
@font-face {
    font-family: 'Helvetica regular';
    src: url(font/helvetica_regular.otf);
}

*,
::before,
::after{
    all: unset;
    display: revert;
    box-sizing: border-box;
}

.container{
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
}

img{
    max-width: 100%;
}

.header{
    padding: 20px 0;
    font-family: 'Helvetica light', sans-serif;
    border-bottom: #CACAD6 1px solid;
    color: #5C5C5E;
    background-color: #F6F4F5;
}

.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ul_nav{
    list-style-type: none;
    text-transform: uppercase;
    display: flex;
}

.li_nav{
    margin: 0 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OCULUS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
                <nav class="nav">

                    <ul class="ul_nav">
                        <li class="li_nav">SHOP</li>
                        <li class="li_nav">GAMES</li>
                        <li class="li_nav">METAVERSE</li>
                    </ul>


                <a href="#">
                    <img src="image/logo (1).png" alt="logo" class="logo__img_header">
                </a>
   
                <a href="#">
                    <img src="image/bag.png" alt="buy" class="buy_logo__img_header">
                </a>

            </nav>
        </div>
    </header>

    <footer class="footer"></footer>

    <main class="main"></main>

    <script src="main.js"></script>
</body>
</html>

]2]2

Answer 1

Попробуйте в классе .nav использовать grid, если конечно flex не принципиально.

.nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /*Записи одинаковы как вам больше нравиться первый вариант*/
    grid-template-columns: repeat(3, 1fr);/*Второй вариант*/
    align-items: center;
    flex-direction: row;
    justify-items: center;
}

Или можете добавить внутренним элементам ширину 33.3% и свойство flex

.ul_nav {
    list-style-type: none;
    text-transform: uppercase;
    display: flex;
    width: 33.3%;
}
.nav a:nth-child(2), .nav a:nth-child(3) {
    width: 33.3%;
    display: flex;
    flex-direction: row;
}
.nav a:nth-child(2){    
    justify-content: center;
}
.nav a:nth-child(3){
    justify-content: flex-end;
}

Answer 2

Это даст всем непосредственным потомкам блока .nav равную долю пространства, пока их контент не больше этой доли:

.nav :is(ul, a) {
flex: 1;
}

А дальше вам в среднем блоке нужно будет поместить логотип по центру самого блока, например через text-align: center.

Если логотип узкий, а меню слева широкое, возможно использовать более агрессивный вариант:

.nav :is(ul, a) {
flex: 2;
}
.nav > a:nth-child(2) {
text-align: center;
flex: 1;
}
.nav > a:nth-child(3) {
text-align: right;
}

Зря вы не даете классы внутренним элементам. Это облегчает написание селекторов и ускоряет парсинг css.

И еще такой вот момент. Если использовать тэг <a> в качестве родительского элемента и он шире контента (в данном случае изображения логотипа), возможна ситуация, когда пользователь кликает рядом, мимо логотипа, но все равно переходит по ссылке. Тот ли это эффект, который вам нужен?

БЛОГ НА HUSL

Логотип в header по середине

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