居中文本垂直于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>

Answer 1

Pen 和 FullscreenPen

只需将text再包裹一个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>

Answer 2

为此课程pull-left

添加此课程bgtest

Answer 3

尝试使用此 <span style="height: 45px;vertical-align: top;display: inline-block;">Menu</span>

用于您的菜单。使用浏览器

确定的css