webめも011 ナビゲーションの中央寄せ(2パターン)

サンプル

1.ボタン間に余白をつくる場合
liをインライン要素化してtext-align:center;で中央寄せ。

※ブロック要素の中央寄せは「margin: Xpx auto;」
※この方法で余白をなくすテク
・htmlのliの改行を無くし１行で記述すると余白を詰めることは可。可読性下がる。
・font-size指定で、ulは0, liは16pxとする。

CSS

ul { text-align: center; }
li {
  width: 100px;
  display: inline-block;
}
a { display: block; }

2.ボタン間に余白をつくらない場合
ulでlistを中央揃えしたあとに、liをfloat:left;する。
※ulの横幅は、li横幅の合計値になるところがポイント。

ul {
  margin: 0 auto;
  width: 500px; 　/*li横幅の合計値*/
  overflow: hidden;
}
li {
  background: #aaa;
  width: 100px;
  float: left;
}
a {
  display: block;
  text-align: center;
}

共通のHTML

<nav>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</nav> 

参考サイト(5パターン)
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky info