如何將導航欄中的項目對齊到中心？

Question

您將如何對齊導航欄中的項目？ 我嘗試使用text-align: center但無濟於事

 body { font-family: Arial, Helvetica, sans-serif; }.navbar { overflow: hidden; background-color: #333; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="navbar"> <div class="dropdown" id="one"> <button class="dropbtn">A <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="two"> <button class="dropbtn">B <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="three"> <button class="dropbtn">C <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div>

Answer 1

提示：不要使用浮動。 它們是一種過時且麻煩的技術，幾乎沒有合法的現代用途。

相反，使用文本 alignment、自動邊距或 flexbox。

請參閱https://css-tricks.com/snippets/css/a-guide-to-flexbox 。

 body { font-family: Arial, Helvetica, sans-serif; }.navbar { overflow: hidden; background-color: #333; display: flex; /* <---------------------------------- HERE */ justify-content: center; /* <------------------------ HERE */ }.navbar a { font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { overflow: hidden; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="navbar"> <div class="dropdown" id="one"> <button class="dropbtn">A <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="two"> <button class="dropbtn">B <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="three"> <button class="dropbtn">C <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div>

Answer 2

制作一個名為 center 的 div 並將其設為內聯塊

.center{
  display: inline-block;
}

然后像下面這樣用它覆蓋你所有的下拉菜單

  <div class="center">
    <div class="dropdown" id="one">
      <button class="dropbtn">
        A
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown" id="two">
      <button class="dropbtn">
        B
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown" id="three">
      <button class="dropbtn">
        C
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>

然后添加到您的 css 文本對齊中心到.navbar

  .navbar {
    overflow: hidden;
    background-color: #333;
    text-align:center

  }

現在它將居中 div class.center 並且您的下拉菜單項將始終居中

還有其他方法可以做到這一點，但如果你不聲明你的 div 的寬度，這看起來是最好的

下面是正確的完整代碼片段

 body { font-family: Arial, Helvetica, sans-serif; }.center { display: inline-block; }.navbar { overflow: hidden; background-color: #333; text-align: center }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="navbar"> <div class="center"> <div class="dropdown" id="one"> <button class="dropbtn"> A <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="two"> <button class="dropbtn"> B <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" id="three"> <button class="dropbtn"> C <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> </div>