Image in navbar isn't centered with text, logo and links are on the left but I want links on the right

Issue

I have a problem with the navbar on my website. When I insert an image to the navbar it doesn't center with other links/text.

Edit: I want to align logo to the left and links to the right.

Screenshot of navbar:

Edited navbar (1st issue with verticall centering is solved): Edited navbar

nav {
  overflow: hidden;
  display: flex;
  padding: 20px 15px;
  color: #344E41;
  align-items: center;
  justify-content: center;
}

nav a {
  color: #344E41;
  text-decoration: none;
  margin: 0px 20px;
  transition: 0.5s;
}

nav a:hover {
  opacity: 75%;
}

<nav>
  <img src="assets/img/big_logo_black.png" height="50px">
  <a id="nav_a" href="#link1">link1</a>
  <a id="nav_a" href="#link2">link2</a>
</nav>

Solution

You can use display: flex for this.

/* Navbar */

nav {
    overflow: hidden;
    display: flex; /* Updated */
    padding: 20px 15px;
    color: #344E41;
    justify-content: center; /* New */
    align-items: center; /* New */
    /* text-align: center; Removed */
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

<nav>
    <img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
    <a id="nav_a" href="#link1">link1</a>
    <a id="nav_a" href="#link2">link2</a>
</nav>

Here's a tool which may be helpful in figuring out how to center certain elements on your page: http://howtocenterincss.com/

Answered By - robere2