如何使 bootstrap 中的汉堡包菜单图标居中？

Question

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

问题是单词 "menu" 和汉堡包图标出现在不同的行上，并且由于单词较长，所以间距不对。所以，我想把汉堡图标的位置居中。

这是我的 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 制作图标的方式（通过 span 标签），所以如果有一些让它们居中的技巧，请告诉我。

Answer 1

您可以通过以下方式使按钮中的 3 行（跨度）居中：

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

如何使 bootstrap 中的汉堡包菜单图标居中？

How do I center the hamburger menu icon in bootstrap?

navigation

drupal

twitter-bootstrap-3

hamburger-menu