html - Horizontal align of floating elements within a responsive div -

i have element structure in this fiddle, in action it's responsive. width different , faced difficulty center lis when ul smaller default. here's code: [html]:

<ul>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li>     <li>some nice text</li> </ul> 

[css]:

ul { width: 400px; /* <-- try change - li won't centered :(*/      overflow-x: hidden;     overflow-y: auto;     padding: 0 16px;     border: 1px solid black; }  li {     border-radius: 5px;     box-shadow: 0 0 15px #aaaaaa;     float: left;     height: 150px;     display: inline-block;     list-style: none;     margin: 15px;     padding: 10px;     text-align: center;     width: 100px; } 

the clear question is: how align horizontally floating elements in block responsive width?

you align horizontally center inline-block elements giving parent element text-align: center; , add vertical-align (e.g. top) child elements avoid vertical positioning issues.

add text-align: center; ul , add vertical-align: top; li , remove float: left; li tag.

jsfiddle - demo

ul {     width: 400px;     overflow-x: hidden;     overflow-y: auto;     padding: 0 16px;     border: 1px solid black;     text-align: center; } li {     border-radius: 5px;     box-shadow: 0 0 15px #aaaaaa;     height: 150px;     display: inline-block;     list-style: none;     margin: 15px;     padding: 10px;     text-align: center;     width: 100px;     vertical-align: top; }