导航栏标题不在中心答案

【问题标题】：Nav bar header is not coming in the center导航栏标题不在中心
【发布时间】：2020-02-28 11:21:07
【问题描述】：

我希望我的标题应该在导航栏的中心。我已经尝试了一些代码，但它不起作用。

.navbar img {
  float: left;
  width: 80px;
  height: 80px;
  position: relative;
  top: -12px;
}

.navbar h1 {
  top: 18px;
  font-size: 30px;
  color: brown;
  text-align: center;
}

.navbar {
  min-height: 80px;
}

<nav class="navbar navbar-default header">
  <div class="container-fluid">
    <div class="navbar-header">

      <h1>My heading</h1>
    </div>
  </div>
</nav>

我也参考了这个链接：How to center align text in navigation bar of website in CSS?

他们提到它应该在text-align: center。但我已经包含了我的脚本。请问有什么意见吗？

【问题讨论】：

可能重复stackoverflow.com/questions/43497560/…
@GBWDev 是对的。可能是您的其他 css 文件正在影响它
您的其他 css 文件会影响 h1 的样式。它有margin-top: 20px 和marginbottom: 10px，所以它不在中心。

标签： html css navbar

【解决方案1】：

您的 navbar-header 没有占据整个宽度，因为它默认从 Bootstrap 应用了 float: left。如果您添加 width: 100% 属性或 float: none 属性，您应该会在导航栏中看到它的中心。

.navbar-header {
  width: 100%;
}

或

.navbar-header {
  float: none;
}

【讨论】：

【解决方案2】：

它在中心...？也许是你的其他 CSS 文件影响了它。

.navbar img {
  float: left;
  width: 80px;
  height: 80px;
  position: relative;
  top: -12px;
}

.navbar h1 {
  top: 18px;
  font-size: 30px;
  color: brown;
  text-align: center;
}

.navbar {
  min-height: 80px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">


<nav class="navbar navbar-default header">
  <div class="container-fluid">
    <div class="navbar-header">

      <h1>My heading</h1>
    </div>
  </div>
</nav>

【讨论】：