How To Create Center Navbar with CSS

When designing a website's navigation, ensuring the navbar is centered can contribute to a balanced and visually appealing layout. By utilizing CSS (Cascading Style Sheets), there are multiple methods available to achieve a centered navbar.

One approach involves using text alignment properties, such as text-align: center, which can be applied to the parent container, assuming the navbar items are displayed inline or inline-block. The navbar items can be centered both horizontally and vertically. There are various methods to achieve a centered navbar, which we will discuss in this article. You can select the one that best suits your design preferences and requirements.

01. Using Text Alignment
02. Using Flexbox
03. Using Grid
04. Using Absolute Positioning

01. Using Text Alignment

You can center the navbar by applying text-align: center to its parent container. This assumes the navbar items are displayed inline or inline-block.

<!DOCTYPE html>
<html>
  <head>
    <title>How To Create Center Navbar with CSS | Rustcode</title>
    <style>
      .navbar {
      text-align: center;
      padding: 20px;
      background: lightblue;
      }
      a{
      text-decoration: none;
      padding: 8px;
      color: black;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </body>
</html>

Output:

By setting the text-align property of the parent container to center, the navbar items will be horizontally centered within the container. However, this won't work if the navbar items are displayed as block elements.

Read Also:

02. Using Flexbox

Flexbox is a powerful CSS layout module that allows for easy alignment and positioning of elements. You can center the navbar using flexbox by setting the parent container as a flex container and applying the appropriate flex properties.

<!DOCTYPE html>
<html>
  <head>
    <title>How To Create Center Navbar with CSS | Rustcode</title>
    <style>
      .navbar {
      padding: 20px;
      background: lightblue;
      display: flex;
      justify-content: center;
      }
      a{
      text-decoration: none;
      padding: 8px;
      color: black;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </body>
</html>

Output:

By setting the display property of the parent container to flex, it becomes a flex container. The justify-content: center property centers the flex items (navbar links) horizontally within the flex container.

Read Also:

03. Using Grid

CSS Grid is another powerful layout module that provides a grid-based approach to positioning elements. You can center the navbar using CSS Grid by defining a grid container and using grid properties.

<!DOCTYPE html>
<html>
  <head>
    <title>How To Create Center Navbar with CSS | Rustcode</title>
    <style>
      .navbar {
      padding: 20px;
      background: lightblue;
      display: grid;
      grid-auto-flow: column;
      place-items: center;
      justify-items: center;
      }
      a{
      text-decoration: none;
      padding: 8px;
      color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="navbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </body>
</html>

Output:

By setting the display property of the parent container to grid, it becomes a grid container. The place-items: center property centers the grid items (navbar links) both horizontally and vertically within the grid container.

Read Also:

04. Using Absolute Positioning

If you have a fixed-width navbar, you can center it using absolute positioning by applying left and right properties with a value of auto.

<!DOCTYPE html>
<html>
  <head>
    <title>How To Create Center Navbar with CSS | Rustcode</title>
    <style>
      .navbar {
      padding: 20px;
      background: lightblue;
      position: absolute;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      }
      a{
      text-decoration: none;
      padding: 30px;
      color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="navbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </body>
</html>

Output:

By setting the position property to absolute and the left and right properties to 0, the navbar spans the entire width of its parent container. The margin-left: auto and margin-right: auto properties automatically center the navbar horizontally within the parent container. The text-align: center property centers the navbar links inside the navbar.

Read Also:

Archive