Open In App
Related Articles

How to align a logo image to center of navigation bar using HTML and CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The navigation bar is an essential component of a website that helps users to navigate between different pages. It is usually located at the top of the page and consists of a list of horizontal links, logos, and other elements. The alignment of logos can be adjusted using CSS. In this tutorial, we will focus on how to align the logos to the center of the navigation bar.

Using Flexbox:

Flexbox simplifies centering a logo in a navbar by applying ‘display: flex’ to the navbar container and using ‘justify-content: center’ for horizontal centering, ensuring a straightforward and responsive layout.

Example 1: This example illustrates the flexbox property of CSS to align a logo to the center of the navigation bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Align a logo image to Navabr</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        #navbar {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 40px;
            background-color: rgb(61, 59, 59);
        }
 
        #navbar img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
 
<body>
    <nav id="navbar">
        <img src=
    </nav>
</body>
 
</html>

                    

Output:

Screenshot-2024-01-10-104847

Using absolute positioning:

Absolute positioning in CSS allows elements to be placed relative to their closest positioned ancestor. In this approach, #navbar is set to position: relative, and the logo image (#navbar img) is positioned absolutely at the center using top: 50%, left: 50%, and transform: translate(-50%, -50%).

Example 2: This example illustrates the absolute positioning property of CSS to align a logo to the center of the navigation bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
      <title>Align a logo image to Navabr</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        #navbar {
            position: relative;
            width: 100vw;
            height: 40px;
            background-color: rgb(61, 59, 59);
        }
 
        #navbar img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
        }
    </style>
</head>
 
<body>
    <nav id="navbar">
        <img src=
    </nav>
</body>
 
</html>

                    

Output:

Screenshot-2024-01-10-104847




Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads