align image/icon in navbar

Question

i am currently working with a school task by making a webpage, but i can't seem to figure out how to align an image/icon with the other buttons in the navbar. I have tried to finsd the answer, but i can't seem to find the answer after several google search. Also, i am limited to html and css only and not allowed to use tools like bootstrap. my code for this page is below:

the issue and what i want to achieve in pictures

HTML code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Zero hunger</title>
    <link rel="stylesheet" href="css/master.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><img class="nav-img" src="images/2-zero-hunger.png"></li>
        <li class="nav-button"><a href="index.html">Home</a></li>
        <li class="nav-button"><a href="contact.html">Contact</a></li>
        <li class="nav-button"><a href="game.html">Game</a></li>
      </ul>
    </nav>
    <div class="">
      <p>Hello World</p>
    </div>
  </body>
</html>

CSS code:

body{
  margin: 0;
  font-family: sans-serif;

}

/*Navbar*/
nav ul{
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #D09E37;
}
nav ul li{
  list-style: none;
  display:inline-block;

}
nav ul li.nav-button{
  padding: 0 15px;
}
nav ul li.nav-button:hover{
  background-color: #bf8000;
}
nav ul li a{
  text-decoration: none;
  font-size: 1.5em;
  color: white;
  line-height: 54px;
}
.nav-img{
  height: 58px;
  display: inline-block;
}

score 0 · Answer 1 · answered Nov 26 '20 at 16:36

How about using display: flex on the ul and then set the align-items: center on it. The ul may span 100% wide according to nav which is its parent element. You can set the background-color on the nav. You can also add some gap around each li elements to make it sit nicer.

Something like this ...

nav {
  background-color: orange;
  width: 100vw;
}
ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

Hope you can get some idea and adapt it to solve the problem.

Thank you! It solved the problem – VinFurr Nov 26 '20 at 17:09 — VinFurr, Nov 26 '20 at 17:09

score 0 · Answer 2 · answered Nov 26 '20 at 17:00

0

You can use absolute positioning on the image like this

.nav-img{ position: absolute; 
          top: 0;
          left: 34rem; }

and set the ul to position:relative;

nav ul { 
         position: relative;
       }

Just add the above code and keep the previous one intact. Try changing the values of top and left as per your need.

answered Nov 26 '20 at 17:00

Anurag S

145
1
7

that would work, but not if the window is being resized where the picture will overlap the navbar buttons. The issue has been solved now, but thanks for the effort! – VinFurr Nov 26 '20 at 17:13
Didnt know about it being responsive as well, thanks for the update. @VinFurr – Anurag S Nov 26 '20 at 17:15

score 0 · Accepted Answer · answered Nov 26 '20 at 17:08

I marked my edits in css. I advise you to use the flex rules.

body{
  margin: 0;
  font-family: sans-serif;

}

/*Navbar*/
nav ul{
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #D09E37;
  
  display: flex; /*add*/
  justify-content: center; /*add*/
  align-items: center; /*add*/
}
nav ul li{
  list-style: none;
  display:inline-block;

}
nav ul li.nav-button{
  padding: 0 15px;
}
nav ul li.nav-button:hover{
  background-color: #bf8000;
}
nav ul li a{
  text-decoration: none;
  font-size: 1.5em;
  color: white;
  line-height: 54px;
}
.nav-img{
  height: 58px;
  /*display: inline-block;*/ /*remove*/
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Zero hunger</title>
    <link rel="stylesheet" href="css/master.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><img class="nav-img" src="images/2-zero-hunger.png"></li>
        <li class="nav-button"><a href="index.html">Home</a></li>
        <li class="nav-button"><a href="contact.html">Contact</a></li>
        <li class="nav-button"><a href="game.html">Game</a></li>
      </ul>
    </nav>
    <div class="">
      <p>Hello World</p>
    </div>
  </body>
</html>

align image/icon in navbar

3 Answers3