在屏幕中心获取 <header><ul><li> [重复]答案

【问题标题】：Get <header><ul><li> in center of screen [duplicate]在屏幕中心获取 <header><ul><li> [重复]
【发布时间】：2018-08-06 10:21:43
【问题描述】：

仍在解决很多问题，可以使用您的帮助 atm。我不能让我的标题列表位于页面的中心。

我的 HTML 代码：

  <header>
      <ul>
        <li><h5 class="button rightborder">Blog</h5></li>
        <li><h5 class="button">List Builder [WIP]</h5></li>
        <li><h5 class="button border title">CERBERUS</h5></li>
        <li><h5 class="button rightborder">Math Hammer</h5></li>
        <li><h5 class="button">Other</h5></li>
      </ul>
    </header>

还有我的 CSS 代码：

body {
    background: black url("./background.jpg") no-repeat fixed center;
}

header {
    border-bottom: 1px double white;
    width: 100%;
    position: center;
}

h5 {
    color: white;
    font-family: Helvetica;
    font-size: 18px;
}

li {
    display: inline-block;
    text-align: center;
}

我希望你们能理解我的问题并能够提供帮助。

提前非常感谢您！

【问题讨论】：

离题：您似乎正在使用标题元素 (H5) 进行样式设置。请不要。 webaim.org/techniques/semanticstructure/#correctly
感谢您。还是要学东西。这种东西很有帮助。一个例子会更好，但就像已经说过的帮助一样！

标签： html css

【解决方案1】：

问题是text-align:center 应该在 ul 而不是 li 上。

body {
    background: black url("./background.jpg") no-repeat fixed center;
}

header {
    border-bottom: 1px double white;
    width: 100%;
    position: center;
}

h5 {
    color: white;
    font-family: Helvetica;
    font-size: 18px;
}
ul{    
  text-align: center;
  padding-left:0;

}
li {
    display: inline-block;

}

  <header>
      <ul>
        <li><h5 class="button rightborder">Blog</h5></li>
        <li><h5 class="button">List Builder [WIP]</h5></li>
        <li><h5 class="button border title">CERBERUS</h5></li>
        <li><h5 class="button rightborder">Math Hammer</h5></li>
        <li><h5 class="button">Other</h5></li>
      </ul>
    </header>

【讨论】：

谢谢！这似乎有效。

【解决方案2】：

设置ul {text-align: center}

如果您希望导航具有全屏宽度，请设置以下内容：

ul {display: table; width: 100%;}
li {display: table-cell;}

顺便说一句：没有position: center。

【讨论】：

会试试这个。谢谢你和我一起思考。感谢您的帮助。