导航栏中的垂直对齐按钮

Question

我正在使用 Twitter-Boostrap 框架建立网站，我想在导航栏的最右侧放置一个navbar-toggle button，对齐完全在中间。

我该怎么做？

这是我做的：

＆＃13;

＆＃13;

.navbar-default .container {
  position: relative;
}
.navbar-default .navbar-toggle {
  background-color: #2E8B57;
  border: 5px solid #FFFFFF;
  box-shadow: 1px 1px 1.5px #FFFFFF;
  padding: 8px 10px 8px 10px;
  position: absolute;
  right: 0;
  top: 13px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!--Container-->
    <div class="navbar-header">
      <div class="navbar-brand">
        <a href="index.html">Food, LLC</a>
      </div>
    </div>
    <!--END Navbar-header -->


    <!-- Toggle Button -->
    <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>
  <!-- End Container -->
</nav>
<!-- End Navigation -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

请使用top: 13px;而不是top: 50%使用transform: translateY(-50%)，请参阅以下代码段：

.navbar-default .container {
  position: relative;
}
.navbar-default .navbar-toggle {
  background-color: #2E8B57;
  border: 5px solid #FFFFFF;
  box-shadow: 1px 1px 1.5px #FFFFFF;
  padding: 8px 10px 8px 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!--Container-->
    <div class="navbar-header">
      <div class="navbar-brand">
        <a href="index.html">Food, LLC</a>
      </div>
    </div>
    <!--END Navbar-header -->


    <!-- Toggle Button -->
    <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>
  <!-- End Container -->
</nav>
<!-- End Navigation -->