[英]How to align list item center vertically
I can't align my list into center of my container, 我无法将列表与容器中心对齐,
Refer to the screenshot I provided. 请参阅我提供的屏幕截图。 Can anyone help me to solve this problem ? 谁能帮我解决这个问题?
I have tried vertical-align = middle, justify content but still not center. 我已经尝试过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>
I expect the h6 and list are align center perfectly on the container. 我希望h6和list在容器上完全居中对齐。
Simple use text-align: center
to center align the text horizontally. 简单使用text-align: center
居中对齐水平对齐文本。 For vertical center, you can use display: flex
along with flex-direction: column
and justify-content: center
对于垂直居中,可以使用display: flex
以及flex-direction: column
和justify-content: center
See below example 见下面的例子
.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>
You need to add only text-align: center
, so content centers between the left and right edges. 您只需要添加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>
Hope! 希望! this helps 这有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.