html - 幅が設定されていないリストブロックを中央に配置するにはどうすればよいですか?

Question

UL縮小および拡大できるブロック、ナビゲーションメニューを扱っています。それは、左に浮いていて、任意の長さのユーザー定義のリスト項目でいっぱいです。幅が固定されておらず、HTML を変更したり、JavaScript を使用したりすることはできません。私ができることは、CSSを追加することだけです。リストを中央に配置する最も安全な方法は何ですか?

私が作業しなければならないものの簡単な例: http://jsfiddle.net/DCYn2/1/ 私は CSS しか追加できないことに注意してください。html、js を追加したり、既存の css を削除したりできません。

Answer 1

ul を中央に配置する最も簡単な方法は、display プロパティを table に変更し、余白を変更することです。

http://tinker.io/c5ff0

ul {
    border: 1px solid;
    padding: 0;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

li {
    border: 1px solid red;
    display: inline-block;
}