在 Bootstrap 导航栏中居中文本答案

【问题标题】：Centering a text within Bootstrap Navbar在 Bootstrap 导航栏中居中文本
【发布时间】：2021-12-31 09:30:57
【问题描述】：

我一直未能将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">

没有任何改进。

注意：我们将非常感谢您对 Bootstrap 版本 3.4.1 的反馈。

提前致谢。

【问题讨论】：

你的引导版本是什么？
@AmirMaghami：版本3.4.1

标签： html css twitter-bootstrap text navbar

【解决方案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>

【讨论】：

感谢您的意见。尽管我一直在使用boostrap_v_3.4.1，但我期待与您一样的结果。在我看来，其他的东西可能会阻止 text 在修改适当的标签后居中。
我推断出一个版本问题，因为您的建议在 Bootstrap 4.3.1 版而不是 3.4.1 版中运行良好。
是的，使用 5.x 版本怎么样？
迁移到较新版本 (>= 4.3.1) 的轻微副作用：在界面上产生不可预见的边缘问题。我一直使用 3.4.1 版本的原因。
那么，使用w-100 text-center类p标签怎么样？