How do I center list items inside a UL element?

Question

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can\'t seem

Answer 1

I have run into this issue before and found that sometimes padding is the issue.

By removing padding from the ul, any li's set to inline-block will be nicely centred:

* {
	box-sizing: border-box;
}

ul {
	width: 120px;
	margin: auto;
	text-align: center;
	border: 1px solid black;
}

li {
	display: inline-block;
}

ul.no_pad {
	padding: 0;
}

p {
	margin: auto;
	text-align: center;
}

.break {
	margin: 50px 10px;
}

  
		
With Padding (Default Style)
            

                
x
                
x
                
x
                
x
            
		

		
No Padding (Padding: 0)
			

                
x
                
x
                
x
                
x
            
	

Hope that helps anyone running into this same issue :)

Cheers,

Jake