サイトを作るときにフッターとかにテキストメニューを並べたいとき、こだわらないのであれば、pタグとかにメニュー項目を縦棒(|)で区切って並べれば簡単。
例:| ホーム | お知らせ | なんとか | かんとか |
でも、htmlのマークアップにこだわるならば、どうせだったらリスト(ul,li)で並べたいと思うのがウェブ屋の佐賀…じゃなくて性。
単に左揃えだったら、ulにborder-leftを設定し、liにborder-rightを設定し、liの左右のpaddingを適当に設定してdisplay:inline;か、float:left;すればいい。
んが。それをさらにセンタリングするには?
ってことで、とりあえず下のオレンジ色のフッター部分(footer)のulをセンタリングしてます。
キモはulをdisplay:inlineで強制的にインライン要素にして、外枠の#footerでtext-align:centerを使ってセンタリングするところなんですが、これってCSS的にアリなのかナシなのかは微妙っす。
とりあえず、ulでマークアップしたテキストメニューを、ソースを汚さずに簡単にセンタリングするひとつの方法として。
090507追記
某Goくんからの情報で、
上記のサンプルですと、
メニュー項目一つ一つの文字数が多かったり、項目数が多い場合など
すでに横幅ギリギリで収まってる場合、
Firefox2や文字スケールの制御JSなどを使って拡大表示すると、
文字の半端なところで改行されたりしてしまいますよ。
とのことなので、#footer liの属性に
width: auto; white-space: nowrap;
を追加すると、はみ出た場合li要素が次の行にブロックごと落ちてくれる…とのことです。