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
お礼
学習教材の学習途中なので、続きが有るのかもしれません。clear:both;も有りませんでした。ありがとうございます。
補足
それが取ってみても分からなかったのです。<li>は、複数要素を横並びにして左詰にしますよね。<div1>は、<div2>と横並び且つその左に置きますよね。この時点で、<div1>のtextと<div2>のli要素はすべて横並びになっていますよね。そして、テキストは何も指示しなければ左詰だから、<div2>はもともと左に寄ってますよね。<div2>をわざわざfloat:leftする意味がわからないです。