将我的网页标签居中答案

【问题标题】：Centering my webpage tabs将我的网页标签居中
【发布时间】：2015-03-07 02:06:52
【问题描述】：

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

    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>

【问题讨论】：

<center> 标签已被弃用，不应再使用。
取出 HTML 中的中心标签并尝试将 ul 放入包装器中，然后使用 css 适当地定义它。
How do I center list items inside a UL element?的可能重复
阅读文档w3schools.com/css/css_align.asp

标签： html css center webpage

【解决方案1】：

将此div 与.centeer 类添加到您的标签而不是<center>：

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

Live Demo

【讨论】：

【解决方案2】：

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

        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;

        }

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

【讨论】：