How to align list item center vertically

Question

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.

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

Answer 1

Simple use text-align: center to center align the text horizontally. For vertical center, you can use display: flex along with flex-direction: column and 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> 

Answer 2

You need to add only text-align: center , so content centers between the left and right edges.

 .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