将徽标与菜单对齐

Question

I'm trying to align a simple nav bar with the logo on the left and the menu + searchbar on the right. I just can't figure out how to get them horizontally aligned. I'm working mobile first with media queries. I feel like this should have a really simple fix but I just can't see it.

here's my HTML and CSS

 @media screen and (max-width: 1499px) and (min-width: 1153px) {.navbar-toggle, .main-nav.social { display: none; }.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: flex; }.logo { order: 0; }.mainnav { order: 1; }.searchicon { order: 3; } header { max-width: 1153px; margin-bottom: 10px; }

 <header> <span class="navbar-toggle" id="js-navbar-toggle"> <i class="fas fa-bars"></i> </span> <div class="navbardesk"> <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> <p class="welkomtekst"> Welkom.<br> Bij buurtsuper Leo vd Drift bent u aan het juiste adres als het gaat om verse producten. </p> </header>

oh and here's the codepen: https://codepen.io/radartrinkets/project/editor/XgWOvG

Answer 1

You can use "flex" to align items. Example:

.v-align{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

And you use "v-align" class on parent div of menu and logo, it will center your content on X and Y axis. if you want to lose X axis, you can delete "justify-content" part