使标签以HTML页面CSS为中心

Question

我试图以页面为中心。  我已经尝试过align =＆＃34; center＆＃34;在div中，也尝试了位置：中心;在css。

我似乎无法让它居中。

注意：我不想使用position：absolute; 这是我现在的代码

＆＃13;

＆＃13;

  .tab-links li {

    margin: 0px 5px;

    float: center;

    list-style: none;

    position: center;

    display: inline-block;

  }

  .tab-links a {

    padding: 9px 15px;

    display: inline-block;

    border-radius: 3px 3px 0px 0px;

    background: #D3D3D3;

    font-size: 16px;

    font-weight: 600;

    border: 1px solid black;

    transition: all linear 0.15s;

    text-align: center;

    width: 150px;

    float: center;

  }

  .tab-links a:hover {

    background: #a7cce5;

    text-decoration: none;

  }

＆＃13;

<div class="tabs">
  <ul class="tab-links">

    <li><a href="">Home</a>
    </li>
    <li><a href="">Listing</a>
    </li>
    <li><a href="">Bidding</a>
    </li>
    <li><a href="">Maintenance</a>
    </li>
    <li><a href="">Log Out</a>
    </li>
  </ul>
</div>
<br>

＆＃13;

＆＃13;

＆＃13; 关于如何使其居中的任何建议。

由于

Answer 1

只需将以下内容添加到CSS中：

.tabs{
width: 100%;
text-align: center;
}

结帐DEMO

Answer 2

看看display: table;和margin: 0 auto;

.tabs {
  display: table;
  margin: 0 auto;
}
.tab-links li {
  margin: 0px 5px;
  float: center;
  list-style: none;
  position: center;
  display: inline-block;
}
.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0px 0px;
  background: #D3D3D3;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid black;
  transition: all linear 0.15s;
  text-align: center;
  width: 150px;
  float: center;
}
.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

<div class="tabs">
  <ul class="tab-links">

    <li><a href="">Home</a>
    </li>
    <li><a href="">Listing</a>
    </li>
    <li><a href="">Bidding</a>
    </li>
    <li><a href="">Maintenance</a>
    </li>
    <li><a href="">Log Out</a>
    </li>
  </ul>
</div>