如何在列表元素中居中

Question

我正在尝试创建一个响应式导航菜单，其中列表元素在小屏幕上跨越了容器的100％。我几乎成功地完成了此任务，但是我唯一的问题是文本停留在框中的左侧，我希望将其居中。

有人知道如何将文本置于列表元素的中心

     <div class="header"> 
            <nav>

              <ul>
                <li>    <a class="nav" href="#">  Home</a>   </li>
                <li>    <a class="nav" href="#">  Gallery</a>   </li>
                <li>    <a class="nav" href="#">  About</a>   </li>
                <li>    <a class="nav" href="#">  Contact</a>   </li>
             </ul>
            </nav>
          </div>


      .header { width: 75%;
                background: pink;
                height: 100px;
                color: white;
                margin: 0 auto;
                height:max-content;
                padding-bottom: 5px;
                padding-left: 2%;
                padding-right: 2%;
               }

      ul       { list-style-type: none;
                 width: 100%;
                 margin: auto;
                 position: relative;
                 background:pink;
                 padding:0;}

      li       { display: block;
                 padding-left: 20px;
                 font-size: 1.4em;
                 width: 98%;
                 border: solid 1px #f0c330;
                 border-radius: 10px;
                 margin-left: 1%;
                 margin-right: 1%;
                 margin-bottom: 2px;
                 background: black;
                 padding: 3px;
                 }



      .nav      {text-decoration: none;
                 color: #f0c330;

                 }


       .nav:hover  { color: white; }

Answer 1

将text-align: center添加到列表项：

.header {
  width: 75%;
  background: pink;
  height: 100px;
  color: white;
  margin: 0 auto;
  height: max-content;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
}

ul {
  list-style-type: none;
  width: 100%;
  margin: auto;
  position: relative;
  background: pink;
  padding: 0;
}

li {
  text-align: center; /* added this line */
  display: block;
  padding-left: 20px;
  font-size: 1.4em;
  width: 98%;
  border: solid 1px #f0c330;
  border-radius: 10px;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2px;
  background: black;
  padding: 3px;
}

.nav {
  text-decoration: none;
  color: #f0c330;
}

.nav:hover {
  color: white;
}

<div class="header">
  <nav>

    <ul>
      <li> <a class="nav" href="#">  Home</a> </li>
      <li> <a class="nav" href="#">  Gallery</a> </li>
      <li> <a class="nav" href="#">  About</a> </li>
      <li> <a class="nav" href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>

Answer 2

仅在li元素（ul）的父元素上使用text-align: center;。

这是一个工作示例：

.header {
  width: 75%;
  background: pink;
  height: 100px;
  color: white;
  margin: 0 auto;
  height: max-content;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
}

ul {
  list-style-type: none;
  width: 100%;
  margin: auto;
  position: relative;
  background: pink;
  padding: 0;
  text-align: center;
}

li {
  display: block;
  padding-left: 20px;
  font-size: 1.4em;
  width: 98%;
  border: solid 1px #f0c330;
  border-radius: 10px;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2px;
  background: black;
  padding: 3px;
}

.nav {
  text-decoration: none;
  color: #f0c330;
}

.nav:hover {
  color: white;
}

<div class="header">
  <nav>
    <ul>
      <li> <a class="nav" href="#">  Home</a> </li>
      <li> <a class="nav" href="#">  Gallery</a> </li>
      <li> <a class="nav" href="#">  About</a> </li>
      <li> <a class="nav" href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>