Fit width as in display:inline - html

Question

I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too:
http://jsfiddle.net/NWmpL/1/
I was trying to use additional wrapper which closely surrounds <li>, but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/
but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)
Is there any other way to "closely surround" content? Or is there any other solution ?
Thanks in advance.
More clearly: http://jsfiddle.net/NWmpL/6/
I want change this
to this

Answer 1

You should be using display:inline-block for layout, not display:inline.
display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.
So I went to your fiddle and changed the inline to inline-block.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.

Answer 2

Add
float:left;
to
.center li { }
FIDDLE

Answer 3

ul.center {
display: table;
margin: 0 auto;
width:250px; }
ul.center li {
display: block;
float: left;
width:75px; height:75px;
margin: 2px;
list-style: none;
background-color: #CCC; }

Answer 4

check the updated fiddle:
http://jsfiddle.net/4t6ha/2/
Try this different approach:
CSS:
.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}
ul
{
list-style:none;
}
li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}