Adding image to navbar breaks text alignment-CodePudding

I have the following HTML code for my navbar in a header:

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

I am centring it in the header using the CSS below:

navbar {text-align: center; display: block; height: 75px; line-height: 75px;}

The header looks like this:

Now when I add an image to the header like so:

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <img id = "navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

The header looks like this:

Why is the alignment broken? How can I add an image to the middle of the navbar and keep the alignment?

CodePudding user response：

Using flex with justify-content: space-around (border added for clarity):

#navbar,
#navbar1 {
  display: flex;
  justify-content: space-around;
  height: 75px;
  line-height: 75px;
  border: 1px solid red;
  margin-bottom: 3rem;
}

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

<nav id="navbar1">
  <a href="">Home</a>
  <a href="">About</a>
  <img id="navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

CodePudding user response：

you must change the property display to flex

#navbar {
            text-align: center; 
            display: flex; 
            justify-content: center;
            height: 75px; 
            line-height: 75px;
        }

CodePudding user response：

Use flex layout:

body{
  background-color: #a3a3a3;
}
nav{
  height: 75px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
} 
a{
  display:flex;
  align-items: center;
  justify-content:center;
  height: 100%;
  width: calc(40%/4);
  text-decoration: none;
  color: #000;
  }
  a:hover{
    background-color: rgba(255, 255,255, 0.3);
  }

<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <img id = "navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

CodePudding user response：

this way:

#navbar {
  text-align   : center; 
  height       : 75px; 
  border       : 2px solid grey;
  border-right : none;
  border-left  : none;
  padding      : 2px 0;
  } 
#navbar_img {
  vertical-align : middle; 
  clip-path      : circle(50% at center);
  }
#navbar a {
  text-decoration : none;
  display         : inline-block;
  width           : 75px;
  text-align      : center;
  }

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <img id="navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>