[英]How to align nav-item to center of page
* { margin: 0px; padding: 0px; box-sizing: border-box; } html { font-size: 10px; }.clearfix::after { display: block; clear: both; content: ""; } nav { position: absolute; margin: auto; .nav-container { padding-right: 2rem; padding-left: 2rem; padding-bottom: 2rem; margin-top: 2rem; margin-right: auto; margin-left: auto; .nav-list { list-style-type: none; .nav-item { display: inline-block; padding-left: 2rem; padding-right: 2rem; font-size: 1.2rem; .nav-link { text-decoration: none; color: #fbfdff; } } } } } header { background-color: #313131; height: 50rem; }
<nav> <div class="nav-container"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">HOME</a></li> <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li> <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li> <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li> </ul> </div> </nav>
如何將導航項與導航容器的中心對齊? 導航欄應該有透明背景,所以我想添加 position: absolute; 導航元素的樣式。 此外,所有 nav-item 都應該並排出現。 這就是為什么我添加了 display: inline-block; 風格給他們。
將nav
的寬度設置為全寬,然后使用text-align: center
。
nav {
width: 100%;
text-align: center;
}
有很多方法,但我更喜歡在“導航列表”中使用 flexbox 或 css 網格。 這是使用 felexbox 的示例:
.nav-list {
display:flex;
justify-content:center;
align-items: center; (if want to align vertically as well)
list-style-type: none;
}
它將解決您的問題,復制粘貼並享受。
只需在 css 中添加它,它將位於中心
.nav-list{
display: grid;
justify-content: center;
}
您的 styles 語法不正確。
* { margin: 0px; padding: 0px; box-sizing: border-box; } html { font-size: 10px; }.clearfix::after { display: block; clear: both; content: ""; }.nav-container { padding-right: 2rem; padding-left: 2rem; padding-bottom: 2rem; margin-top: 2rem; margin-right: auto; margin-left: auto; }.nav-list { list-style-type: none; }.nav-item { display: inline-block; padding-left: 2rem; padding-right: 2rem; font-size: 1.2rem; }.nav-link { text-decoration: none; } header { background-color: #313131; height: 50rem; }
<nav> <div class="nav-container"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">HOME</a></li> <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li> <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li> <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li> </ul> </div> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.