如何使導航欄“按鈕”居中？

Question

我正在制作一個有趣的網站，並希望使導航欄居中，但似乎無濟於事。 我希望導航欄全寬，但中間有“按鈕”。 而且響應迅速，我已經嘗試添加css（navbar li）：margin-left：50％。 但這不是我想要的，左邊距：自動和右邊距：自動也不起作用。 我嘗試使用display：inline-block和text-align：center; 但這不起作用。 你有什么建議嗎？

 .navbar { position: relative; margin-top: -47px; } .navbar ul { width: 99%; list-style-type: none; margin: auto; padding: 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); } .navbar li {} .navbar li a { float: left; color: white; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgba(0, 0, 0, 0.8); } .dropdown-content { display: none; position: absolute; margin-top: 47px; background-color: rgba(0, 0, 0, 0.8); text-align: center; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .active { background-color: rgba(0, 0, 0, 0.8); color: white; } 

 <div class="navbar"> <ul> <li><a class="active" href="index.html">Home</a></li> <li class="dropdown"><a href="bewegingillusie.html">Plans</a> <div class="dropdown-content"> <a href="about_us.html">Route</a> <a href="about_the_website.html">Places I want to go</a> <a href="about_the_website.html">My budget</a> </div> </li> <li class="dropdown"><a href="fotoillusie.html">Journey</a> <div class="dropdown-content"> <a href="about_us.html">South-Africa</a> <a href="about_the_website.html">Thailand</a> <a href="about_the_website.html">Country1</a> <a href="about_the_website.html">Country2</a> <a href="about_the_website.html">Country3</a> <a href="about_the_website.html">Country4</a> </div> </li> <li><a href="kleurillusie.html">Photos</a></li> <li><a href="vormillusie.html">Other websites</a></li> <li class="dropdown"><a href="about.html">About</a></li> </ul> </div> 

Answer 1

您是否嘗試過設置display: flex; 在您的<ul> ？ 然后，您應該可以添加justify-content: center; 。

Answer 2

通過設置text-align: center; 在.navbar ul並display:inline-block; 在.navbar ul ，如下所示：

.navbar ul {
     width: 99%;
     list-style-type: none;
     margin: auto;
     padding: 0;
     overflow: hidden;
     background-color: rgba(0,0,0,0.5);
     text-align: center;
 }

 .navbar li {
     display: inline-block;
 }