センターのメニュー項目

Question

W3Schoolsの小さな画面に応答しますナビゲーションバーの良い例があります。

私は左に揃え代わりに、中心のメニュー項目を持つことができますどのように

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

？ ul.topnav li {float: center;}を設定すると、縦にスタックされます。

Answer 1

は次のようにCSSを編集してみてください。

ここ

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align:center; 
} 

私達はちょうど中央にテキストの配置を追加しています。次へ

ul.topnav li {display:inline-block;} 

ここでは、fload：leftを削除し、ディスプレイをinline-blockに設定します。これはあなたに望ましい結果をもたらしますか？ https://www.w3schools.com/css/css_float.asp

がへliを揃えるには：W3Cのドキュメント - 「フロートとクリアCSSレイアウト」あなたは私が見てみるお勧め山車についての詳細をお知りになりたい場合は

Answer 2

float: center;は、CSSで有効ではありませんあなたはまた、より多くのフレキシボックスのアプローチを試してみて、ちょうど持っている可能性があり

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align: center; 
} 

ul.topnav li { 
    display: inline-block 
} 

：あなたのような何かを行うことができ、ナビゲーションの中心

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    display: flex; 
    justify-content: center; 
} 

あなたはフレキシボックスを使用することを決定した場合は、追加する必要はありません。ul.topnav li { display:inline-block; }

フレキシボックスは良く、今日サポートされています：http://caniuse.com/#feat=flexbox

Answer 3

をあなたはフレキシボックスで簡単にこれを行うことができます。ページ

ul.topnav { 
    display: flex; 
    justify-content: center; 

    // rest of CSS goes here 

} 

の最上部にul.topnavに次のCSSを追加し、その後

ul.topnav li {float: left;} /*remove this line of CSS*/ 

：あなたはW3のサイトに与えてくれたリンク次の行を削除するには