Can't perfectly center navbar-brand (Bootstrap 5.1.3)-CodePudding

I'm new to web developing and I'm trying to create a navigation bar with Bootstrap 5.1.3. I'm trying to perfectly center "Postal Office", but as you can see it seems to be pushing out to the right. I've tried doing something like mx-auto but it doesn't help. Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Post Office</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <!--Navigation-->
    <div >
        <nav  style="background-color: #e3f2fd;">
            <div >
                <ul >
                    <a href="index.php" >Home</a>
                    <a href="mail.php" >Mail</a>
                    <a href="pricing.php" >Pricing</a>
                    <a href="contact-us.php" >Contact Us</a>
                </ul>
                <a href="#" >Postal Office</a>
                <ul >
                    <li >
                            <a href="#"  data-bs-toggle="dropdown">Account Options</a>
                            <div >
                                <a href="my-account.php" >My Account</a>
                                <a href="database-access.php" >Database Access</a>
                                <a href="sign-out.php" >Sign Out</a>
                            </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>

Output: img

CodePudding user response：

This is because your left data contain more data & space then right your left data contain 262.17 with 4 column and your right data contain 148.05 with 4 column

look like

40	40	40
262.17	110.08	148.05

CodePudding user response：

This solution works because I am splitting the navbar into two navbars. I noticed that regardless of any <center></center> or other HTML/CSS trickery, if you place your text into the navbar with centering, it will be centered with relation to the navbar and not the actual html document.

You probably noticed that the text you desired to put into the center ("Post Office") was centered with respect to the elements already located in the navbar. This is why your text was always shifted slightly to the right — your text had equal spacing between itself and the leftside elements of the navbar and between itself and the rightside elements of the navbar. This is why when we break down the navbar into two navbars, then we can insert centered text that is globally centered to the webpage, as you desired.

The only downside I see to my method is scaling, which you may have to play around with more.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Post Office</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous">
    <style>
        <!-- START CHANGE-->
        <!-- Added CSS elements as suggested by https://stackoverflow.com/questions/45691242/centering-my-text-in-bootstrap-navbar but pretty sure it would work without this-->
        .nav {
        display: flex;
        justify-content: center;
        list-style: none;
        }
        <!-- END CHANGE-->
    </style>
</head>
<body>
    <!--Navigation-->
    <div >
    <nav  style="background-color: #e3f2fd;">
        <div >
            <ul >
                <a href="index.php" >Home</a>
                <a href="mail.php" >Mail</a>
                <a href="pricing.php" >Pricing</a>
                <a href="contact-us.php" >Contact Us</a>
            </ul>
        </div>
        <!-- START CHANGE -->
        <!-- Split Navbar into two, so that centering is "global" and not relative to the navbar elements -->
        <center><a href="#" >Postal Office</a></center>
        <!-- END CHANGE -->
        <div >
            <ul >
                <li >
                    <a href="#" 
                        data-bs-toggle="dropdown">Account Options</a>
                    <div >
                        <a href="my-account.php" >My Account</a>
                        <a href="database-access.php" >Database
                        Access</a>
                        <a href="sign-out.php" >Sign Out</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>