Wie zentriere ich die Navigation auf der Seite mithilfe der UL-Liste?
P粉052686710
2023-08-13 11:06:53
<p>如何在页面上水平和垂直居中ul列表中的导航?</p>
<p>以下是HTML und CSS-代码</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.nav{
Breite: 100 %;
Höhe: 100 %;
Position: fest;
Hintergrundfarbe: weiß;
Überlauf versteckt;
}
.menu a{
Polsterung: 30px;
Farbe: Schwarz;
Textausrichtung: Mitte;
links: 0;
Rand: 0 automatisch;
Flex: keine;
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Mitte;
}</pre>
<pre class="brush:html;toolbar:false;"><nav class="nav">
<ul class="menu">
<li><a href="#">Google Store</a></li>
<li><a href="#">Google-Suche</a> </li>
<li><a href="#">Spotify</a></li>
<li><a href="#">Spotify Blog</a></li>
<li><a href="#">Squarespace</a></li>
<li><a href="#">Andere Arbeiten</a></li>
</ul>
</nav></pre>
<p><br /></p>
<p>我尝试使用CSS的flex方法来对齐项目.</p>
你必须将flexbox属性应用于包含项目的容器,而不是项目本身。
这样可以使你的ul在.nav容器中水平和垂直居中。