inline-blockで、横並びリストもCSSで中央寄せ可能!

横並びのメニューを作成する場合、リストタグ(<li>)でマークアップして、スタイルシートで左寄せ(float: left;)というのが定番です。この場合、リスト全体(<ul><ol>など)も左寄せになります。

仕事で、「左寄せで表示しているリストを、中央寄せに変更する」という作業がありました。リスト全体の幅が決まっていれば、左右のマージンを自動(margin: 0 auto;)にすることで中央寄せになりますが、今回はリスト要素(<li>)の数が不確定で、リスト全体(<ul>)の幅が決まっていません。

今回は、リスト要素(<li>)に「インラインブロック(display: inline-block;)」を指定、親要素の<ul>に中央寄せ(text-align: center;)を指定することで、リスト全体の中央寄せを実現しました。

参考にしたサイトは、こちら。インラインブロックが実装されていないブラウザ(IE 7 以前、Firefox 2 以前)への対応方法も書かれています。

リストのセンタリング « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb.
inline-blockはもう使える(だいたい) | Takazudo Clipping*.

This entry was posted in ホームページ制作メモ and tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

コメントをどうぞ

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>