html - 如何垂直对齐列表项中心

Question

我无法将列表对齐到容器的中心，

引用我提供的截图。谁能帮我解决这个问题？

我试过 vertical-align = middle, justify content 但还是不居中。

.pink1 {
  background-color: pink;
  grid-column: 2/4;
  height: auto;
  font-family: sans-serif;
}

.pink1>h6 {
  text-align: center;
}

.pink1>ul {
  list-style: none;
  align-items: center;
}

.pink1>ul>li {
  font-size: 1em;
  vertical-align: middle;
}

<div class="pink1 area">
  <h6>Navigation</h6>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">GALLERY</a></li>
    <li><a href="#">EVENTS</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</div>

我希望 h6 和列表在容器上完全居中对齐。

Answer 1

简单使用 text-align: center 将文本水平居中对齐。 对于垂直居中，您可以使用 display: flex 以及 flex-direction: column 和 justify-content: center

看下面的例子

.pink1 {
  background-color: pink;
  grid-column: 2/4;
  height: auto;
  font-family: sans-serif;
  display: flex;
  flex-direction: column; /*For handling elements vertically*/
  justify-content: center; /* to Align items vertically center */
  min-height: 500px; /* You can remove this. i have added  this to show the difference */

}

.pink1>h6 {
  text-align: center;
}

.pink1>ul {
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0
}

.pink1>ul>li {
  font-size: 1em;
  vertical-align: middle;
  text-align: center;
  padding: 5px 0;

}

<div class="pink1 area">
  <h6>Navigation</h6>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">GALLERY</a></li>
    <li><a href="#">EVENTS</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</div>