中心子导航栏项目

Question

我正在尝试将“subnav-content a”项目居中。

下面是 HTML 代码的片段。

<div class="navbar">
  <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Employees">Employee Details</a>
  <div class="subnav">
    <button class="subnavbtn">Employment Contracts<i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Employment_Contracts">Full-time</a>
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Part_time_Employment_Contracts">MV Part-time</a>
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Casual_Employment_Contracts">P&E Casual</a>
    </div>
  </div>

这是 CSS 我有的片段：

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  align: center;
  background-color: #35335d;
  color: white;
  width: 100%;
  z-index: 1;
}

.subnav-content a {
  float: center;
  color: white;
  text-decoration: none;
}

到目前为止，我有两个导航栏。一个主导航栏，当用户将鼠标悬停在一个按钮上时，它会打开一个子导航栏，但子导航栏项目顽固地粘在左边。我希望他们在中心。我已经尝试了一些方法，但对我来说不太奏效。

Answer 1

我们没有 float 中心。 float 只是 left 或 right。你可以使用这个

.subnav-content a {
position: absolute;
left: 0;
right: 0;

}

Answer 2

我整理好了。我不得不将它包装在另一个 div 中并创建一个自定义列 class.

.column {
  float: left;
  width: 50%;
  padding: 1px;
  
  }
  
  .column1 {
  float: left;
  width: 25%;
  padding: 1px;
  }

中心子导航栏项目

Center Sub Nav Bar Items

html

css

zoho