ULリストを使用してページのナビゲーションを中央に配置するにはどうすればよいですか?
P粉052686710
2023-08-13 11:06:53
<p>页面上水平和垂直居中ul列表中の导航はどのように行われますか?</p>
<p>以下はHTMLとCSS代コードです</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.nav{
幅: 100%;
高さ: 100%;
位置: 固定;
背景色: 白;
オーバーフロー: 非表示;
}
.メニューa{
パディング: 30px;
色: 黒;
テキスト整列: 中央;
左: 0;
マージン: 0 自動;
フレックス: なし。
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}</pre>
<pre class="brush:html;toolbar:false;"><nav class="nav">
<ul class="メニュー">
<li><a href="#">Google ストア</a></li>
<li><a href="#">Google 検索</a> </li>
<li><a href="#">Spotify</a></li>
<li><a href="#">Spotify ブログ</a></li>
<li><a href="#">スクエアスペース</a></li>
<li><a href="#">その他の仕事</a></li>
</ul>
</nav></pre>
<p><br /></p>
<p>私たちは CSS の flex メソッドを使用して、トップ項目を試してみました。
フレックスボックスのプロパティは、アイテム自体ではなく、アイテムを含むコンテナに適用する必要があります。
これにより、UL が .nav コンテナ内で水平方向と垂直方向の中央に配置されます。