Wie zentriere ich das Hamburgermenü-Symbol im Bootstrap?

Question

Ich benutze Bootstrap 3.6 mit Drupal 7. Ich habe ein Hamburger-Menü für die Navbar für Mobile, aber weil ich viele Benutzer habe, die das Hamburgermenü-Symbol nicht verstehen, habe ich eine Textbezeichnung, "Menü . "

Das Problem ist, dass das Wort "Menü" und das Hamburger-Symbol in einer anderen Zeile angezeigt werden, und da das Wort länger ist, ist der Abstand deaktiviert. Also möchte ich die Position des Hamburger-Icons zentrieren.

Hier ist der Code von meiner Drupal Vorlage.

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

Leider text-center scheint nicht ausreichend zu sein, um die Hamburger Symbol zu zentrieren. Ich bin nicht wirklich vertraut mit der Art, wie Bootstrap das Icon erstellt (durch span-Tags), also wenn es einen Trick gibt, sie zu zentrieren, lass es mich wissen.

Answer 1

Sie sind in der Lage mit den drei Linien (Joche) im Knopf zum Zentrum:

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