Как настроить значок меню гамбургера в бутстрапе?

Question

Я использую Bootstrap 3.6 с Drupal 7. У меня есть меню гамбургеров для навигационной панели для мобильных устройств, но поскольку у меня есть много пользователей, которые не понимают значок меню гамбургера, я добавил текстовую метку «Меню «.

Проблема в том, что слово «меню» и значок гамбургера отображаются на другой строке, а поскольку слово длиннее, интервал выключен. Итак, я хочу сосредоточить положение значка гамбургера.

Вот код моего шаблона 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; 
}