center <li> elements in <ul> depending on <li> size

In the image above, you can see that -its not perfect- all the <ul> elements have all the same size, and the <li> items no, but they are centered in 开发者_JAVA百科the <ul> no matter what size is (always assuming that will be smaller)

how can i do this?

ul{ width:160px; }
li{ width:auto; margin:5px auto;}

is not working..

-Image edited with texts-

---

I don't really understand what you're trying to say with your images, but here's how to make something that looks like them.

See: http://jsfiddle.net/thirtydot/wGpPc/

HTML:

<div class="listContainer">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        ..
    </ul>
</div>

CSS:

.listContainer {
    width: 160px;
    background: #ccc;
    border: 1px solid #444;
    float: left;
    text-align: center;
    margin-right: 9px
}
.listContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    background: #f0f;

    /* for ie6/7 */
    *display: inline;
    zoom: 1
}
li {
    margin: 5px 0;
    background: #fff
}