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

尝试添加此css：

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

删除navbar-text个样式。

绝对不确定这是否有效。再现您的问题的一个工作示例将有很大帮助。

Answer 2

测试：

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

然后调整与.container相同的width的{{1}} width

如何在导航栏中居中文字？

2 个答案: