横並びのリンクなどを中央揃えするCSS

フッターナビゲーションなどでテキストリンクを横並びにして中央揃えにした時ありますよね。
そんな時のHTMLとCSSの記述をしておきます。

◆HTML

<div id=”footer_navi”>
<ul>
<li><a href=”index.html”>トップページ</a>　｜</li>
<li><a href=”price.html”>料金体系</a>　｜</li>
<li><a href=”access.html”>アクセス</a>　｜</li>
<li><a href=”qa.html”>Q&A</a>　｜</a></li>
<li><a href=”sitemap.html”>サイトマップ</a></li>
</ul>
</div>

◆CSS

#footer_navi {
text-align:center;
}

#footer_navi ul li {
display: inline;
}

知っているとたったこれだけなんですが、ハマるとナカナカ抜け出せないのがCSS。
結構使えると思います。