How to Center the Navbar Using CSS

1. Navbar in HTML
2. Create a Navigation Bar Using HTML and CSS
3. Center Align the Navigation Bar Using CSS

This article will explore the different positions of the navigation bar, which is an essential component of a website. We will also learn its purpose and different alignment settings.

Navbar in HTML

GUI includes a navigation system or bar that facilitates information access for users. A web page’s user interface (UI) component contains links to the other website sections and is known as a navigation bar or navbar.

A navigation bar often appears at the top of the page as a horizontal list of links. It can be positioned above or below the header, but it must always come before the page’s main content.

The navigation of a website must be simple to use. It significantly impacts the website because it enables visitors quick access to any section.

There can be two different styles for the navigation bar on your website:

1. Horizontal Navigation Bar
2. Vertical Navigation Bar

Create a Navigation Bar Using HTML and CSS

First, we will see how the navigation bar is created using HTML components. Since the navigation bar is just a list of different links, list elements, i.e., <ul> and <li>, are used to create a navigation bar.

Every item in the list is a link to another website page. So, the list will be created as follows.

Example Code:

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

li::marker {
    content: '';
}

As it is a simple <ul> element, so for making it act as a navbar, we need to apply different CSS properties to it:

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}

li a {
  display: block;
  padding: 9px;
  background-color: dark blue;
}
</style>

li::marker {
    content: '';
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

In this example, different CSS properties convey different purposes:

1. The list-style-type is set to none to remove the bullet markers in the navigation bar.
2. The margin and padding are set to zero to remove any margins in the browser by default.
3. The overflow property is set to a hidden value to restrict the li elements from moving outside the list.
4. The float is set to the left value to create the navbar in the horizontal direction.
5. For the <li> items, display: block is used to make the hyperlinks in the block position, making the whole block clickable.

We can apply different styles and formatting to this navbar, such as background-color and text color.

Center Align the Navigation Bar Using CSS

To align the navbar in the center of the page, we can add two properties: one to the div element and the other to the <ul> element like this:

div{
text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

We made the div to align text as the center, and then we made the ul element to display inline-block. This will make the list of elements move to the center of the page.

So, you can see that we made the navigation bar in the center of the page by just assigning two properties. We can also apply multiple properties that can decorate the navigation bar according to our design requirements.