如何垂直对齐列表项中心

Question

我无法将列表与容器中心对齐

请参阅我提供的屏幕截图。谁能帮助我解决这个问题？

我尝试过vertical-align = middle，证明内容合理，但仍不能居中

.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和list在容器上居中对齐。

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>

Answer 2

您只需要添加text-align: center，以便内容位于左右边缘之间。

.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;
  text-align: center;
}

<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>

希望！这有帮助