要するに横幅を自動で設定してやるだけ。

サンプル

$ (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>