<li>をfloat,inlineさせたときのセンタリング

質問

スタイルシートを用いて、ナビゲーションバーを作っています。

リスト<li>をfloatさせて、横に長いものにしていますが、
1行では収まらないため、2行になっています。

リストにfloat:leftとinlineを指定することで、普通のテキストのように<div>ボックス内に流し込んで、端でいっぱいになったところで自動的に改行させています。

<div id="header">
<ul id="navi">
<li>トップ</a></li>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>
</div>

#header #navi li{
float:left;
display: inline;
}

実際には10個ぐらいあるのですが、説明のため上のように4つのアイテムがあるとして、説明すると、今は
トップ ページ１ ページ２
と表示され、次の行で、"トップ"の左側に揃って
ページ３
が表示されます。

やりたいことは、1行目のちょうど真ん中、（この場合"ページ１"の下あたり）に"ページ３"を表示させたいのです。

#header{
text-align:center;
}
または
#header ul{
text-aligne:center;
}
で良いのかと思ったのですが、うまくいきません。

こういったことはできるのでしょうか？
そもそも、やり方がまちがっていますか？

<li>に対してfloatを解除すると、センタリングされるのですが、<li>同士の間にスペースが出来てしまいます（バックグラウンドに色が付いているので）。どちらかというとこちらをなんとかするようにしたほうがいいのでしょうか？

回答No.1

steel_gray

float:left としているのでtext-align:centerは効かなくなりますね。
また、floatを解除すると単なるテキストですからソース上の改行文字も半角スペースと扱われます。（隙間が空く）
ソース上の改行をとれば一応隙間なく、折り返した行のセンタリングもされるようになるようです。

お礼

なるほど。改行が半角スペースとして扱われるのですね。
とりあえず、改行をなくす方法で書こうと思います。

ありがとうございました。