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

Question

我在下面的导航中有一个标题 我试图将标题与导航中心对齐。

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

当我使用CSS时，如下所示

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

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

Answer 1

这与此问题类似：Bootstrap center heading

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

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

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

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

Answer 2

.navbar h1 {
  text-align: center;
}

或

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

如果您的h1被设置为块元素，它肯定会对齐中心

Answer 3

你的例子运作正常！但是，您可能需要将宽度设置为导航栏。

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

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

Answer 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;
}

Answer 5

只需添加：

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

可替换地：

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