メニューを中央に配置し、ページの上部に固定する必要があります。メニューの内容は動的であるため、その幅は事前にわかりません。私がウェブで見つけた解決策は、幅がわかっているか、位置が固定されていないことを前提としています。
これを行う方法はありますか?
CSS および JavaScript ソリューションは歓迎されます。
メニューを中央に配置し、ページの上部に固定する必要があります。メニューの内容は動的であるため、その幅は事前にわかりません。私がウェブで見つけた解決策は、幅がわかっているか、位置が固定されていないことを前提としています。
これを行う方法はありますか?
CSS および JavaScript ソリューションは歓迎されます。
これを読んでください。図とデモを使用して、最も中心的な質問に回答します。
あなたの場合、最も簡単な方法はおそらく 2 つの要素を使用することです。position: fixed
andtext-align: center
を最も外側の div で使用します。次に、中央揃えの要素を に設定しdisplay: inline
ます。(これを行うときは、文字スペースに注意する必要があります。)
ここを参照してください:
ラッパー div を作成し、それを固定に設定し、整列を中央に設定するだけです。それはあなたが探しているものを与えるはずです。
<div style="position: fixed; top: 0; width: 100%;" align="center">
<ul>
<li>Menuitem</li>
<li>Menuitem2</li>
</ul>
</div>