导航栏标题无法居中，已尝试CSS代码无效，求解决方案

看起来你遇到的问题是Bootstrap默认的navbar布局限制了标题的居中效果，核心原因是navbar-header这个容器默认是左浮动的，它的宽度只会包裹内部的标题内容——所以你给h1加的text-align:center只是在这个窄小的容器里生效，而非整个导航栏的宽度范围。

这里提供两种实用的解决方案，你可以根据需求选择：

方案一：用Flex布局重构导航栏（推荐） #

这种方法更现代，能同时轻松控制内容的垂直/水平对齐，还能灵活处理logo和标题的位置：

.navbar { 
  min-height: 80px;
  display: flex;
  align-items: center; /* 让所有内容垂直居中 */
  justify-content: center; /* 让标题在导航栏水平居中 */
  position: relative; /* 为logo的绝对定位提供参考容器 */
}
.navbar img { 
  width: 80px; 
  height: 80px; 
  position: absolute;
  left: 15px; /* 调整logo到左侧的距离 */
  top: 0;
}
.navbar h1 { 
  font-size: 30px; 
  color: brown; 
  margin: 0; /* 移除h1默认的上下边距，避免垂直偏移 */
}

对应的HTML可以简化（不需要navbar-header）：

<nav class="navbar navbar-default header">
  <div class="container-fluid">
    <img src="你的logo地址" alt="站点Logo">
    <h1>My heading</h1>
  </div>
</nav>

方案二：修改现有navbar-header的样式 #

如果想保留原来的HTML结构，可以调整navbar-header的宽度和对齐规则：

.navbar { min-height: 80px; }
.navbar-header {
  width: 100%; /* 让容器占满整个导航栏宽度 */
  text-align: center; /* 让内部内容居中 */
}
.navbar h1 { 
  top: 18px; 
  font-size: 30px; 
  color: brown; 
  display: inline-block; /* 避免h1占满宽度，确保居中效果 */
  margin: 0; /* 移除默认边距，修正垂直位置 */
}
.navbar img { 
  width: 80px; 
  height: 80px; 
  position: absolute; /* 脱离文档流，不干扰标题的居中布局 */
  top: 0;
  left: 15px;
}

为什么原来的代码不生效？ #

Bootstrap的.navbar-header默认带有float: left样式，这会让它的宽度收缩到刚好包裹h1的内容。此时你给h1设置text-align:center，只是让文字在这个狭窄的容器里居中，而非整个导航栏的水平中心。通过让navbar-header占满宽度，或者改用flex布局，才能让标题在导航栏的整个范围内居中显示。

内容的提问来源于stack exchange，提问作者user11862294