如何将标题与导航中心对齐？答案

【问题标题】：How to Align Heading to the center of Navigation?如何将标题与导航中心对齐？
【发布时间】：2018-04-16 11:42:57
【问题描述】：

我在导航中有一个标题，如下所示我正在尝试将标题与导航中心对齐。

<nav class="navbar navbar-default">
  <h1>My Heading</h1> 
</nav>

当我像下面这样使用 CSS 时

.navbar{
  min-height: 70px;
  background-color: #e8e8e8;
  text-align: center;
}

它不会将导航栏中的文本对齐为居中，而是向左对齐。我还尝试为 h1 添加 CSS。它也不起作用。我错过了什么？

【问题讨论】：

你能提供一个小提琴吗？
您可以尝试将您的h1 对齐在navbar 的中心
检查具体顺序。您的页面/css 上可能有一个非常重要的类，它将 h1 与左对齐。 developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【解决方案1】：

这和这个问题类似：Bootstrap center heading

bootstrap 为文本对齐添加了三个 css 类。

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

【讨论】：

【解决方案2】：

.navbar h1 {
  text-align: center;
}

或

.navbar h1 {
  text-align: center !important;
}

如果你的 h1 是块元素，它肯定会居中对齐

【讨论】：

【解决方案3】：

您的示例运行良好！但是，您可能需要将宽度设置为导航栏。

.navbar{
  min-height: 70px;
  background-color: #e8e8e8;
  text-align: center;
  width: 100%
}

<nav class="navbar navbar-default">
  <h1>My Heading</h1> 
</nav>

【讨论】：

【解决方案4】：

试试这个：

nav.navbar.navbar-default h1 {
  text-align: center;
}

或者，请在 h1 标签中添加一个类并像这样编写 css：

<nav class="navbar navbar-default">
  <h1 class="heading">My Heading</h1> 
</nav>

nav.navbar.navbar-default h1.heading {
  text-align: center;
}

【讨论】：

【解决方案5】：

只需添加：

nav > h1
{
   text-align:center !important;
}

或者：

nav > h1
{
    display: inline-block;
    float: none; 
}

【讨论】：