居中我的网页标签

Question

我正在为我的网页设计课程设计一个电视节目页面。 我在我的网页上添加了标签，以便在教程后用作顶级菜单，但现在我不确定如何使标签居中，即使使用中心标签也是如此。

    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

Answer 2

浮动具有更高的优先级，这就是为什么你的内容浮动到一边而不是对齐的原因。在 li 元素的css中，使用一些内联变体来避免堆叠。

＆＃13;

＆＃13;

        body {

          font: 0.8em arial, helvetica, sans-serif;

        }

       

        #header ul {

          list-style: none;

          padding: 0;

          margin: 0;

        }

        #header li {
          display: inline-flex;

          border: 1px solid #bbb;

          border-bottom-width: 0;

          margin: 0;

          padding: 0;

        }

        #header a {

          text-decoration: none;
          
          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;

        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;