在Bootstrap的汉堡菜单按钮中，将文本垂直居中对齐图标

Question

我试图在屏幕缩小到狭窄宽度时自定义Bootstrap的汉堡按钮。

Codepen: http://codepen.io/Chiz/pen/epWLjY

网站: http://oneniceday.com/SR-1/SR-3.html（将浏览器宽度调整为768px或以下）

截图:

我想要“菜单”文本在容器中垂直居中，但是无论使用什么垂直居中技术都无法实现。目前，该文本对齐到按钮容器的底部。

这是代码:

$(document).ready(function() {
  $('.tab-menu li').each(function() {
    var ord = $(this).index() + 1;
    var width = $(this).width();

    $(this).click(function() {
      var width = $(this).width();
      var nextWidth = 0;
      $(this).prevAll().each(function() {
        nextWidth += $(this).width();
      });

      var widthtes = nextWidth;
      iterateLi(ord, widthtes, width);

      if ($(this).hasClass('active')) {
        //do nothing
      } else {
        //remove all active classes
        $(this).closest('ul').find('li').removeClass('active');
        //add active class to selected li
        $(this).addClass('active');
      }
    });
  });
});

// Calculating position
$('.tab-menu li:first-child').append('<span class="indicator"></span>');

$("head").append('<style class="tabs"></style>');

function iterateLi(ord, widthtes, width) {
  $('head style.tabs').append("li:first-child .indicator { -webkit-transform: translate3d(" + widthtes + "px,0,0); transform: translate3d(" + widthtes + "px,0,0); width: " + width + "px}");
}


/* fix for the indicator tab which is 1px short */
var nNum = $(".navbar ul li .indicator").height();
nNum += 14;
$(".navbar ul li .indicator").height(nNum);

$("button.navbar-toggle").width("100px").height("45px");

.navbar {
  background-color: rgba(230, 230, 230, 1.00);
}
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > .active,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:link,
.navbar-default .navbar-nav > .active > a:visited,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
  color: white;
}
.navbar ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  background-color: rgba(230, 230, 230, 1.00);
}
.navbar ul li {
  display: inline-block;
  float: left;
  position: relative;
  margin-right: 0;
  width: 150px;
  text-align: center;
}
.navbar ul li a {
  position: relative;
  display: block;
  color: #fff;
  opacity: 1;
  z-index: 10;
}
.navbar ul li a:hover,
.navbar ul li a:focus {
  text-decoration: none;
  color: #fff;
  opacity: 1;
}
.navbar ul li.active a,
.navbar ul li.active a:hover,
.navbar ul li.active:focus {
  opacity: 1;
  color: #222;
}
.navbar ul li .indicator {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  /* consider using SASS to add 1px here */
  background-color: rgba(132, 132, 132, 1.00);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: '';
  -webkit-transition: -webkit-transform 100s;
  transition: transform 350ms;
}
.navbar-toggle {
  border: 1px solid black !important;
  padding: 0 5px;
  position: relative;
  margin: 4px;
  /* CENTER THE "MENU" text in the hamburger menu button */
  height: 45px !important;
  line-height: 45px !important;
}
.bgtest {
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">MySiteLogo</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="bgtest"></span>
        Menu
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right tab-menu">
        <li class="active"><a href="#" data-toggle="tab">Me</a>
        </li>
        <li><a href="#" data-toggle="tab">Web</a>
        </li>
        <li><a href="#" data-toggle="tab">Print</a>
        </li>
        <li><a href="#" data-toggle="tab">Art / 3D</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

- Xeon

Answer 1

将这个类 bgtest 添加一个类 pull-left。

- Lalji Tadhani

Answer 2

尝试使用这个 <span style="height: 45px;vertical-align: top;display: inline-block;">菜单</span> 作为您的菜单。在特定宽度的浏览器上使用该css。

- perseusl

Answer 3

笔 和 全屏笔

只需将您的文本用一个额外的span包裹起来，并像下面这样添加float:right或pull-right类：

标记

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="bgtest"></span>
    <span class="pull-right">Menu</span> <!--Wrap it like this-->
</button>

- Guruprasad J Rao

---

谢谢，它可以工作！但是，当我点击它时，出现的菜单全部是水平的，而不是垂直堆叠在一起的。我希望它看起来像这样：http://codepen.io/Chiz/full/GpmYKG/ 谢谢！ - Xeon

你为你的 navbar 定义了自定义样式，所以很难修改整个设置以像 Bootstrap 可折叠菜单一样运行。不过你可以尝试使用一些 @media 查询。 - Guruprasad J Rao

谢谢，有没有使用jQuery的方法，当点击汉堡图标时显示自定义菜单？比如覆盖默认操作，以便在显示自定义导航栏的代替，它显示另一个新的导航栏集？谢谢！ - Xeon

是的，有的。在 jquery 中有很多选项可以做到这一点。你只需要谷歌一下就可以找到很多了。 :) - Guruprasad J Rao

谢谢，但我该搜索什么？我尝试使用诸如“用jquery覆盖元素”和“jquery拦截事件”之类的术语，但找不到有用的东西。 - Xeon