CSSで組む際に、たまに困るのが要素の配置関係です。
テーブル組みなら上下中央寄せはデフォルトなのですが、<div>などの要素の場合は必ず上付きになってしまいます。
そこでいろいろと試してみたところ、CSSでもなんとかすればできそうなのでメモしておきます。
まず以下のようなHTMLがあるとします。
そして以下のCSSで「Box」というdivに対し、ulのリストを上下中央に配置します。
デモはこちら
確認したブラウザはIE6、IE7、Firefox2、Opera9、Safari(Win)です。
どうでしょうか。望みどおりになったと思います。
しかし、これには重要な注意点があります。
CSS中でIE独自関数であるexpression()を使うことにより、子要素の高さと幅をJavaScriptで取得していますが、このexpression()関数がけっこうクセモノでして。
上記のデモHTMLで「IEが重くなった」人もいるかもしれません。
expression()関数は、ウインドウのスクロールやマウスの挙動によって常に評価されつづけているらしく、たとえばexpression()関数内でエラーがあった場合、IEのJavaScriptエラー通知をオンにしていると、怒涛のエラー通知ダイアログが表示されます。
要するにonScrollやonMouseMoveなどが常に動いている、ということを知った上で使用する必要があるということですね。