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

Question

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>

I the code you provided the image is centered? what do you mean? — tacoshy, Jul 02 '22 at 19:24

score 0 · Accepted Answer · answered Jul 02 '22 at 19:23

0

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 Jul 02 '22 at 19:23

robere2

1,689
2
16
26

while flexbox is a good solution, the code he provided works perfectly fine. As such there is no reason to change anything unless he adds more details that replicate the issue – tacoshy Jul 02 '22 at 19:25
Not sure what you mean. The image he's linked shows the logo is not centered vertically, which is presumably what the question is asking about. Obviously he isn't asking for help centering horizontally. The question could be edited to clarify this. – robere2 Jul 02 '22 at 19:26
he never mentioned that he wanted a vertical alignment. That's why I said you should wait for more details to clarify the issue – tacoshy Jul 02 '22 at 19:26
@tacoshy I think his intentions are clear based off of the question. No clarification is necessary to provide a sufficient answer (however, it should be added for completeness, you're right). – robere2 Jul 02 '22 at 19:28
maybe then it still would be a common duplicated that should be linked as such instead of answering – tacoshy Jul 02 '22 at 19:29
@tacoshy Both can be done, I just couldn't find one in my immediate search and it was quicker to provide an answer. I see you've found one, which is good enough for me. However, the accepted answer does not talk specifically about centering images vertically, but maybe that isn't necessary to really answer the question. – robere2 Jul 02 '22 at 19:33

Ayush Paine · Answer 2 · 2022-07-03T08:47:22.227

CSS flex box is a great solution for such cases. You can use the align-items property for your particular use case. This can be implemented as follows -

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

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

nav a:hover {
  opacity: 75%;
}

<nav>
  <div>
  <img src="https://source.unsplash.com/user/c_v_r" height="50px">
  </div>
  <div>
    <a id="nav_a" href="#link1">link1</a>
  </div>
  <div>
    <a id="nav_a" href="#link2">link2</a>
  </div>
</nav>

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

2 Answers2