I keep failing in centering a text within navbar, and seek the rationale an my understanding.

Please find below the syntaxes used:

   <div>
        <nav class="navbar navbar-inverse navbar-fixed-top" style="height: 20px;">
            <center><p class="navbar-text" style="font-size: 20px;text-align:center">test text 
             alignment</p> 
            </center><br>
        </nav>
    </div>

I have even tried

<div class="container-fluid-nav text-center">

without any improvement.

N.B : Feedback leveraging on Bootstrap version 3.4.1 would highly be appreciated.

Thanks in advance.

CodePudding user response：

It is because .navbar-text has float: left property in min-width: 768px. So you can set it none in style.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN Bdg0JdbxYKrThecOKuH5zCYotlSAcp1 c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div>
        <nav class="navbar navbar-inverse justify-content-center navbar-fixed-top" style=""><p class="navbar-text text-center" style="font-size: 20px; float: none;">test text alignment</p>
        </nav>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>