Question 184215 in Html Question posted in
Some basic documentation can be found here.

Html – How to vertically center navbar link in UL tag in CSS?

#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 12%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}
<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>

How to anchor tag inside a li in ul tag in CSS
i centered ul in div tag but how to vertically center li in ul tag.

Tags:

3

Answers


  1. 0

    The padding of ul is messing with the design
    Include the nav_link ul 

    #nav_link {
  background: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 20%;
  height: 15rem;
}
#nav_link ul {
  padding:0;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}
    <nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>
    Login or Signup to reply.
  2. 0

    To vertically center the navbar links within the tag, you can use CSS flexbox along with the align-items: center property. Here’s an updated version of your CSS code:

    <!DOCTYPE html>
<html>
<head>
<style>
#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center; /* Added property */
  outline: 2px solid white;
  margin-top: 30px;
  width: 37%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

</style>

</head>
<body>
<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>

</body>
</html>
    Login or Signup to reply.
  3. 0 
    #nav_link { background: orange; display: flex; justify-content: center; outline: 2px solid white; margin-top: 30px; width: 50%; height: 15rem; align-items: center; } #nav_link ul{ padding: 0px; text-align: center; } #nav_link li {
list-style: none; text-align: center; font-size: 20px; }
    <nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search