Bootstrap 导航栏水平对齐

Question

结构：

---------------------------------------------- 
 Logo Text                  item1 item2_1 item3
                                  item2_2
----------------------------------------------

我想要的是将徽标、文本和项目水平居中。 item2 太长，有 2 个部分。我试过了，但我无法得到它。

代码如下：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="#?>"><img src="Logo.png" style="height: 25px;" class="d-inline-block align-middle">Text</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">

        <li><a href="#">item1</a></li>
        <li><a href="#">item2_1<br>item2_2</a></li>
        <li class="menuletra"><a href="#">item3</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS

.navbar {
min-height: 70px;
padding-top: 5px;
margin-bottom: 0px;
z-index: 100;}

谢谢

Answer 1

如果您想在下拉菜单中水平居中文本，只需将text-align: center 设置为.navbar。如果您想在桌面视图中将徽标和文本从屏幕边缘移开一点，您需要将max-width 添加到.navbar > .container。

这可以在下面看到：

.navbar {
  min-height: 70px;
  padding-top: 5px;
  margin-bottom: 0px;
  z-index: 100;
  text-align: center;
}

.navbar > .container {
  max-width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="#?>"><img src="http://placehold.it/100" style="height: 25px;" class="d-inline-block align-middle">Text</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">

        <li><a href="#">item1</a></li>
        <li><a href="#">item2_1<br>item2_2</a></li>
        <li class="menuletra"><a href="#">item3</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>