slicknavのメニューボタンを中央に配置するにはどうすればいいですか？

Question

slicknavにメニューメニューボタンを中央に配置したいと考えています。私は試しましたが、何も動かない。私はそれを左に揃えることができますが、中央にはできません。ここ

サンプルマークアップここにある

<ul id="menu"> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><a href="#">item 3</a></li> 
    <li><a href="#">item 4</a></li> 
</ul> 

とJS

$(function() { 
    $('#menu').slicknav(); 
}); 

がcodepenリンクですhttp://codepen.io/anon/pen/oLWpao

Answer 1

。

はいくつかのCSSこれは私の問題を解決し

.slicknav_menu { 
    display: block; 
    text-align: center; 
    width: 100%; 
} 
.slicknav_btn { 
    display: inline-block; 
    float: none; 
    text-align: center; 
} 

を追加しました。あなたが中央にフルメニューをしたいhttp://codepen.io/anon/pen/OXmQLG

Answer 2

お使いのブラウザが点検し確認してください。すべての要素にはdisplay：blockが与えられ、ブロック全体に幅が与えられます。 display：inline-blockに `.slicknav_nav a 'を設定し、li parentにテキストセンターを設定した場合、すべてがあなたの望むものでなければなりません。

.slicknav_nav a { 
    display: inline-block; // instead of block; 
} 

.slicknav_nav li { 
    text-align: center; 
} 

これは、いくつかの有用な情報であるかもしれない：私は私の質問への解決策を見つけたWhat is the difference between display: inline and display: inline-block?

Answer 3

.slicknav_menu { 
    text-align: center; 
} 

.slicknav_btn { 
    display: inline-block; 
    float: none; 
}