html - 在屏幕中心获取<header> <ul> <li>

This question already has answers here:

How to center an unordered list?
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
仍然可以解决很多问题，可以使用您的帮助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;
}

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

提前非常感谢您！

最佳答案

问题是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>

关于html - 在屏幕中心获取<header> <ul> <li> ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48997352/