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

Question

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <!--Navigation-->
    <div class="m-4">
        <nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
            <div class="container-fluid">
                <ul class="nav navbar-nav me-auto">
                    <a href="index.php" class="nav-item nav-link active">Home</a>
                    <a href="mail.php" class="nav-item nav-link">Mail</a>
                    <a href="pricing.php" class="nav-item nav-link">Pricing</a>
                    <a href="contact-us.php" class="nav-item nav-link">Contact Us</a>
                </ul>
                <a href="#" class="navbar-brand">Postal Office</a>
                <ul class="nav navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Account Options</a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a href="my-account.php" class="dropdown-item">My Account</a>
                                <a href="database-access.php" class="dropdown-item">Database Access</a>
                                <a href="sign-out.php" class="dropdown-item">Sign Out</a>
                            </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>

Output: img

I just want to give you an heads up and say that this is not an good idea due to the other items shown will clash and not compare will with the title. But that is up to you, just an heads up that you need to adjust this for different widths at that point. — Stoff, Apr 03 '22 at 23:30

Muhammad Danish · Answer 1 · 2022-04-04T00:04:26.373

0

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

edited Apr 04 '22 at 00:04

answered Apr 03 '22 at 23:35

Muhammad Danish

11
2

score -1 · Answer 2 · edited Apr 05 '22 at 08:52

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/bootstrap@5.1.3/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 class="m-4">
    <nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <ul class="nav navbar-nav me-auto">
                <a href="index.php" class="nav-item nav-link active">Home</a>
                <a href="mail.php" class="nav-item nav-link">Mail</a>
                <a href="pricing.php" class="nav-item nav-link">Pricing</a>
                <a href="contact-us.php" class="nav-item nav-link">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="#" class="navbar-brand">Postal Office</a></center>
        <!-- END CHANGE -->
        <div class="container-fluid">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle"
                        data-bs-toggle="dropdown">Account Options</a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="my-account.php" class="dropdown-item">My Account</a>
                        <a href="database-access.php" class="dropdown-item">Database
                        Access</a>
                        <a href="sign-out.php" class="dropdown-item">Sign Out</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

Here is the result which the OP desired: Centered title in a Bootstrap navbar

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

2 Answers2