如何使导航栏中的文本居中？

Question

我尝试将我的文本置于导航栏的中央，但它似乎不正确。目前看起来像这样：

我的

但我更希望它是这样的：

我的导航栏看起来像这样：

<body data-spy="scroll" data-target=".navbar-collapse">
    <div class="navbar navbar-inverse ">
        <div class = "container">
            <div class="navbar-header navbar-text">
                <a class="navbar-brand" href="">Møllaren Café</a>
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

              <div class = "collapse navbar-collapse">
             <ul class = "nav navbar-nav">
                <li class = "active"><a href="#">Home</a></li>
                <li><a href="#">Meny</a></li>
                <li><a href="#">Om oss</a></li>
                <li><a href="#">Kontakt</a></li>
              </ul>
              </div>
            </div>
        </div>
    </div>

我的 css 导航栏看起来像这样：

.navbar-text{
  width: 100%;
  text-align: center;
  display: inline-block;

}

这是我的自定义字体：

@font-face {
font-family: 'Diploma Regular';
font-style: normal;
font-weight: normal;
src: local('Diploma Regular'), url('Diploma.woff') format('woff');
}

.navbar-brand{
    font-family: 'Diploma Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diploma Regular'), url('Diploma.woff') format('woff');
}

Answer 1

测试：

.container{
    width: 800px;/*adjust*/
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
}

然后调整 .container width 与 .navbar-text

相同的 width

Answer 2

尝试添加这个 css:

.container {
  display : flex;
  justify-content: center;
}

并删除 navbar-text 样式。

完全不确定这是否有效。重现您的问题的工作示例会有很大帮助。

如何使导航栏中的文本居中？

How to center text in my navbar?

html

css

center

navbar

twitter-bootstrap