css - 居中我的网页选项卡

Question

我正在为我正在参加的网页设计类(class)设计一个电视节目页面。我在我的网页中添加了选项卡以用作教程后的顶部菜单，但现在我不确定如何使选项卡居中，即使使用 center 标签也是如此。

    body {
      font: 0.8em arial, helvetica, sans-serif;
    }
    #header ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #header li {
      float: right;
      border: 1px solid #bbb;
      border-bottom-width: 0;
      margin: 0;
      padding: 0;
    }
    #header a {
      text-decoration: none;
      display: block;
      background: #eee;
      padding: 0.24em 1em;
      color: #00c;
      width: 8em;
      text-align: center;
    }
    #header a:hover {
      background: #ddf;
    }
    #header #selected {
      border-color: black;
    }
    #header #selected a {
      position: relative;
      top: 1px;
      background: white;
      color: black;
      font-weight: bold;
    }
    #content {
      border: 1px solid black;
      clear: both;
      padding: 0 1em;
    }
    h1 {
      margin: 0;
      padding: 0 0 1em 0;
    }

<div id="header">
  <center>
    <ul>
      <li style="font-family: DFKai-SB;"><a href="#">Home</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Shows</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Classic</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">More</a>
      </li>
    </ul>
  </center>
</div>
<div id="content">
</div>

Answer 1

添加这个div与类 .centeer到您的标签而不是 <center> :

.centeer {
    display: table;
    margin: 0px auto 0px auto;
}

Live Demo