横幅不定のブロック要素を中央・右揃え

サンプル

$ (function () {
    $ (".left, .center, .right").each (function () {
        $ (this).css ({
            display: "block",
            float: "none",
            width: $ (this).css ({ display: "inline-block", float: "left" }).width ()
        });
    });
});

.left {
    margin-left: 0;
    margin-right: auto;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.right {
    margin-left: auto;
    margin-right: 0;
}

<ul class="left">
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="left">
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
</ul>
<ul class="center">
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="right">
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
</ul>