ハンバーガーメニューアイコンをブートストラップの中央に置くにはどうしたらいいですか？

Question

私はDrupal7でBootstrap 3.6を使用しています。私はモバイル用のnavbar用のハンバーガーメニューを持っていますが、私はハンバーガーメニューアイコンを理解していないユーザーが多いので、 "

問題は、「メニュー」という単語とハンバーガーアイコンが別の行に表示され、単語が長いためにスペーシングがオフになってしまうことです。だから、私はハンバーガーのアイコンの位置を中心にしたい。

ここに私の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; 
}