具有CSS网格的导航栏将不对齐

Question

因此，我试图制作一个简单的导航栏，其徽标在右侧，菜单和搜索选项在左侧。但是我不知道如何垂直对齐它们。我觉得这可能很容易解决，但我无法弄清楚。是给学校作业的。

这是我的HTML和CSS

<div class="navbardesk v-align">
        <h1 class="logo">Buurtsuper Leo van der Drift</h1>

        <ul class="main-nav" id="js-menu">
            <li><a href="" class="nav-links">Home</a></li>
            <li><a href="" class="nav-links">Over ons</a></li>
            <li><a href="" class="nav-links">Kantoren en bedrijven</a></li>
            <li><a href="" class="nav-links">Bestellen</a></li>
            <li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
        </ul>

        <i class="fas fa-search searchicon"></i>
        </div>

.main-nav{
        display: inline;
        text-align: center;
        padding: 10px 0px 10px 0px;
        margin-top: 20px;

    }

    .main-nav li{
        display: inline;
        border: none;


    }

    .main-nav a{
        padding: 10px;
    }



    .navbardesk{

    display: grid;

    grid-template-areas: "logo links search";
    justify-content: center;
    background-color: rgba(141,125,31,0.9);

}

    .logo{
        display: inline-block;
        grid-area: logo;
        top: auto;
        bottom: auto;
    }

    .main-nav{
        grid-area: links;
        background-color: transparent;
    }

    .searchicon{
        grid-area: search;

        justify-content: center;
    }

it currently looks like this:

and I want it to look like this

Answer 1

鉴于您提供的代码，我无法重现该错误，但是添加align-items:center;应该可以完成您想要的工作。

    .navbardesk{
    display: grid;
    grid-template-areas: "logo links search";
    justify-content: center;
    align-items:center;
    background-color: rgba(141,125,31,0.9);    
   }