如何垂直对齐列表项中心

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> 

希望！ 这有帮助