【css】ul li をセンタリング(中央から横並び)で並べる方法

liを使ってセンタリングしたいときありますよね。
中央から左右に横並びさせたいときです。

floatやflexboxで実装する方法もありますが、
floatはめんどくさい、flexboxは便利だけどクライアントの環境で微妙なときがあったので、
まだまだ下記の方法で<li>をセンタリングで横並びさせています。

例えばこんなふうにページナビでも使えます。

WPのページナビプラグインでも活躍してます！

むっちゃ簡単なので、下記ソースをコピペしてカスタマイズしてください。

ul {
   text-align: center;
}

li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
}

 

実装例

• 001
• 002
• 003