【问题标题】: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。它也不起作用。 我错过了什么?

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案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>

      【讨论】:

      • 当我在 JSFiddle 中测试但在我的 Angular 应用程序中测试时它正在工作。
      【解决方案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; 
        }
        

        【讨论】:

        • 避免使用!important,而是使用css的特殊性。
        • @bhansa,为什么会这样?
        • 它不是简单地覆盖现有的 CSS 只为指定的类/标签?
        • 这个例子很好,但是当你有一个大型应用程序时,最好正确使用 css 选择器而不是覆盖任何东西。
        • 好的,现在我明白了,谢谢,非常感谢您的建议。
        猜你喜欢
        • 2016-06-11
        • 2015-10-18
        • 2021-05-14
        • 2022-11-25
        • 1970-01-01
        • 2016-03-16
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多