cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？
さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。
現在のHTML
<!-- ヘッダ開始 -->
<div id="header">
<h1>サイトタイトル</h1>
<p class="catch"><strong>サイト説明</strong></p>
<div class="opening">
<h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2>
</div>
<ul class="nl clearFix">
<li class="active"><a href="#">１</a></li>
<li><a href="#">２</a></li>
<li><a href="#">３</a></li>
<li><a href="#">４</a></li>
<li><a href="#">５</a></li>
<li><a href="#">６</a></li>
<li><a href="#">７</a></li>
</ul>
<hr class="none">
</div>
<!-- ヘッダ終了 -->
現在のcss
/* --- ヘッダメニュー --- */
#header ul.nl {
width: 100%; /* IE 6のために幅の指定が必要 */
margin: 0 auto;
padding: 0;
background-color: #ffffff; /* ヘッダメニューの背景色 */
list-style-type: none;
text-align: center;
}
/* メニュー項目 */
#header ul.nl li {
width: 124px; /* 項目の幅 */
float: left;
line-height: 100%;
}
/* 最初の項目と最後の項目 */
#header ul.nl li.first,
#header ul.nl li.last {
width: 125px; /* 項目の幅 */
}
わかりにくいと思いますが、上のように配置したいのです。
まだイマイチ理解しきれていないのですが、回答していただければと思います。
↓HPの現状。
http://dateme.web.fc2.com/top.html
補足
説明不足で申し訳ありません。。。 つまり、上の例ですと、li { white-space: nowrap; } なら、5つあるli要素の合計が500pxを超える場合はli要素単位で下に落ちるのでのですが、↓ 【li要素1】 【li要素2】 【li要素3】 【li要素4】 ひとつのli要素だけで500pxを超えるような長文の場合、li要素内では改行しないので、 【li要素1li要素1li要素1li要素1li要素1li要素1li要素1li要素1】 ↑のように突き抜けてしまうので、↓のように改行するようにしたいのです。その場合、li { white-space: nowrap; }は使えないと思うので何か良い方法があれば と思ったわけです。 【li要素1li要素1li要素1li要素1li要素 1li要素1li要素1li要素1】 【li要素2li要素2li要素2li要素2li要素 2li要素2li要素2li要素2】