How to display logo in center inline with menu?

Question

How can I place logo in center inline with menu? So the logo actually is inline but I want to center it with the items from the menu. Menu items starts from the bottom of the logo. How can I do this? Also tried to change the width of li but I couldn't do this, why?

 .logo { display: inline; padding-top: 30px; } #siteNav { text-align: center; width: 100%; margin-left: 0px auto; text-decoration: none; } #siteNav ul { margin: 0; padding: 0; text-align: center; display: inline; } #siteNav li { border-right: 1px solid #797979; list-style: none; display: inline; } #siteNav li:last-child { border-right: none; } #siteNav a { text-align: center; height: 50px; padding: 50px; font-family: 'Mada', sans-serif; font-size: 14px; color: #000000; height: 55px; } 

 <nav id="siteNav"> <img class="logo" src="images/img2-logo.png" alt=""> <ul> <li><a>MISSION</a></li> <li><a>CLIENTS</a></li> <li><a>PRODUCTS</a></li> <li><a>CONTACT</a></li> </ul> </nav> 

Answer 1

CSS flexbox is a good choice here. The align-items property will help you center the these elements. Here is a fabulous resource for more detail on the flexbox approach: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#siteNav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#siteNav img {
  flex: 0 0 auto;
}
#siteNav ul {
  flex: 1 0 auto;
}

Answer 2

I'm not 100% sure what you're asking for but this is my best guess.

Personally, I use CSS grid for everything. You can learn more here .

A quick explanation is that you need to define the grid layout in the parent container:

#siteNav {
    display: grid;
    grid: auto / repeat(6, 1fr);
    grid-row-gap: 20px;
}

You weren't using your logo class, but I did. I also linked a different logo since your logo URL is a local one we can't see.

.logo {
    display: grid;
    grid: auto / repeat(6, 1fr);
    grid-row-gap: 20px;
}

Then I needed to define where your menu items would fall into the grid:

#siteNav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
}

Definitely check out the link up top about CSS grid. It's super useful.

 #siteNav { text-align: center; width: 100%; height: auto; margin-left: 0px auto; text-decoration: none; background-color: #2780bc; display: grid; grid: auto / repeat(6, 1fr); grid-row-gap: 20px; padding: 10px; } .logo { height: 50px; grid-row: 1; grid-column: 1 / -1; justify-self: center; } #siteNav ul { margin: 0; padding: 0; text-align: center; grid-row: 2; grid-column: 1 / -1; justify-self: center; } #siteNav li { border-right: 1px solid #fff; list-style: none; display: inline; } #siteNav li:last-child { border-right: none; } #siteNav a { text-align: center; height: 50px; padding: 50px; font-family: 'Mada', sans-serif; font-size: 14px; color: #ffffff; height: 55px; } 

 <nav id="siteNav"> <img class="logo" src="https://mathiasbynens.github.io/stack-exchange-logos/so-logo.svg" alt=""> <ul> <li><a>MISSION</a></li> <li><a>CLIENTS</a></li> <li><a>PRODUCTS</a></li> <li><a>CONTACT</a></li> </ul> </nav>