将 Bootstrap 导航栏中的文本居中

Question

我总是无法将 text 置于 navbar 的中心，并根据我的理解寻求理由。

请在下面找到所使用的syntaxes：

   <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>

我什至尝试过

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

没有任何改善。

N.B ：非常感谢利用 Bootstrap 版本 3.4.1 的反馈。

提前致谢。

Answer 1

因为.navbar-text在min-width: 768px中有float: left属性。所以你可以在style.

中设置它none

<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>

将 Bootstrap 导航栏中的文本居中

Centering a text within Bootstrap Navbar

html

css

text

navbar

twitter-bootstrap