css - 如何在列表元素中居中文本

Question

This question already has answers here:

CSS center text (horizontally and vertically) inside a div block
                                
                                    （23个答案）
                                
                        
                                在16小时前关闭。
            
                    
我正在尝试制作一个响应式导航菜单，其中列表元素在小屏幕上跨越了容器的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; }

最佳答案

只需在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>

关于css - 如何在列表元素中居中文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59737072/

上一篇：css - 针对最后一个 child ，但如果它是唯一的 child 则不

下一篇：javascript - 单击下一个下拉菜单打开器按钮时关闭上一个下拉菜单并保持该菜单打开

Answer 1

只需在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>