如何將導航欄項目居中？ （有反應）

Question

嘗試了很多東西，但沒有任何效果。 希望大家能幫幫我。 我的導航欄看起來像這樣：

 .navbar-nav{ float: left; } .navbar img{ width: 35px; } #navi{ position: fixed; width: 100%; z-index:1; } .navbar a{ font-size: 25px; } .navbar{ background-color: #000000; } .halter{ padding: 5px; } .navbar-toggler{ } .navbar-brand{ margin-left: 12px; font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif"; }

 <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> <a data-scrol class="navbar-brand" href="#text1"> <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li> </ul> </div> </nav>

我希望我的ul 中的li元素以響應方式居中在導航欄的中間。 想不出解決辦法。

提前致謝。

Answer 1

你需要添加這個css：

#navbarNav{justify-content:center;}

你自己怎么想出來的？

1. 了解引導程序為您提供所有類和 css，但它旨在在需要時覆蓋

2. 在 Chrome 瀏覽器中：

   一種。 右鍵單擊看起來不正確的區域。

   灣從彈出的上下文菜單中選擇 INSPECT

   C。 最大化 DevTools 面板。 左側是組成頁面的 HTML； 右側是當前在左側突出顯示的元素的 CSS。 快去實驗吧！

 /* You need this at FULL SCREEN to see the effect (top right link) The fix is: .navbar-nav{justify-content:center;} */

 .navbar-nav{} .navbar img{width:35px;} #navi{position:fixed;width:100%;z-index:1;} .navbar a{font-size:25px;} .navbar{background-color:#000000;} .halter{padding:5px;} .navbar-toggler{} .navbar-brand{margin-left:12px;font-family:Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";} /* ADD THIS */ #navbarNav{justify-content:center;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> <a data-scrol class="navbar-brand" href="#text1"> <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li> </ul> </div> </nav>

Answer 2

您需要在ul和li 中應用 css

.navbar-nav{
    float: left;
}
.navbar-nav ul {
    float: left;
}
.navbar-nav ul li{
    float: left;
}