如何在引导程序中将汉堡菜单图标居中

Question

我在Drupal 7中使用Bootstrap 3.6。我有一个移动导航栏的汉堡菜单，但因为我有很多用户不理解汉堡菜单图标，我添加了一个文本标签，"菜单"

问题是，单词"菜单"和汉堡图标出现在不同的行上，由于单词较长，所以间距变小。所以，我想将汉堡图标的位置居中。

这是我的Drupal模板中的代码。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
  <div class="text-center">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="navbar-txt"><?php print t('Menu'); ?></span>
  </div>
</button>

不幸的是，text-center似乎不足以使汉堡图标居中。我真的不熟悉Bootstrap制作图标的方式（通过跨度标签），所以如果有什么技巧可以让它们居中，请告诉我。

Answer 1

您可以使用将按钮中的3条线（跨距）居中

.navbar-inverse .navbar-toggle .icon-bar {
  margin-left: auto;
  margin-right: auto;
}