Bootstrap 3.4.1版本Navbar导航栏内文字居中实现问题咨询

• Bootstrap 3.4.1 原生的.navbar-text类默认带有float: left属性，该属性会让元素脱离常规文档流，直接抵消你设置的text-align: center、父级居中标签的居中效果
• 你手动给<nav>设置了height: 20px，但内部<p>标签的字体大小为20px，再加上.navbar-text自带的上下margin，实际内容高度超出了nav的固定高度，导致内容溢出错位
• <center>属于HTML已废弃标签，不同浏览器的兼容渲染效果不确定，且你代码中额外添加的<br>标签会强行折行，进一步破坏布局
• container-fluid-nav不是Bootstrap 3.4.1自带的原生类，你没有为这个自定义类编写配套样式的话，自然不会生效

完整可运行的代码片段如下：

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

核心修改逻辑：

• 移除<nav>上手动设置的固定height，使用Bootstrap navbar默认的上下padding适配内容高度，避免内容溢出
• 给.navbar-text添加float: none行内样式，覆盖Bootstrap默认的左浮动属性，让元素回归常规文档流，父级的居中设置才能生效
• 用Bootstrap原生的container+text-center类作为父级居中容器，替代废弃的<center>标签
• 调整.navbar-text的margin值，让文字在navbar内垂直居中，你可以根据自己的实际需求调整margin数值，适配不同的字体大小

内容的提问来源于stack exchange，提问作者dark.vador