我如何居中 <ul> 元件？

Question

我对这里的一些代码有一个快速的问题：

h1 {
    font - size: 65 px;
    color: orange;
    text - align: center;
    height: 20 px;
    font: Times;
}

h2 {
    text - align: center;
    font: Times;
}

ul {
    width: 1230 px;
    list - style - type: none;
    overflow: hidden;
    background - color: #C2C6DD;
    justify - content: center;
}

h1和h2是网页的标题，居中。 但是，ul（导航栏）没有居中，我尝试了许多不同的方法，例如align-items，text-align，它始终位于页面的左侧。 有人可以帮忙吗？

Answer 1

您尝试以下代码：

 ul{
  list-style-type:none;
  display:flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: #C2C6DD;
  text-align: center;
}

Answer 2

尝试添加margin: 0 auto; 对ul：

ul {
    width: 1230px;
    list-style-type: none;
    overflow: hidden;
    background-color: #C2C6DD;
    margin: 0 auto;
}

Answer 3

试试看：

ul {
    width: 1230 px;
    list - style - type: none;
    overflow: hidden;
    background - color: #C2C6DD;
    justify - content: center;
    margin: 0 auto;
    text-align: center;
}