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

Question

#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.

maybe using display: flex with align-items: center ? – Allure Jun 08 '23 at 12:21 — Allure, Jun 08 '23 at 12:21

score 1 · Answer 1 · answered Jun 08 '23 at 12:34

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>

score 1 · Answer 2 · answered Jun 08 '23 at 13:11

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>

brijesh bhatore · Answer 3 · 2023-06-08T13:35:07.860

-1

#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>

edited Jun 08 '23 at 13:35

answered Jun 08 '23 at 13:34

brijesh bhatore

55
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '23 at 15:33

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

3 Answers3