导航栏中的垂直对齐按钮

Question

我正在使用Twitter-Boostrap框架创建一个网站，我想在导航栏的最右边放置一个navbar-toggle button ，该navbar-toggle button 恰好在中间对齐。

我怎样才能做到这一点？

这是我所做的：

 .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; } 

 <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 --> 

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 -->