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中并创建一个自定义列类。

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

中心子导航栏项目

2 个答案: