CSSでボックス要素を垂直方向に中央寄せ

CSSでのレイアウトで壁になるもののひとつではないでしょうか。
水平方向中央寄せは、margin-leftとmargin-rightをautoにして中央寄せ要素のwidthを指定してやれば実現できるので、垂直方向もmargin-topとmargin-bottomをautoにしちゃえばできそうなものですが、
それができないという謎な仕様のせいで非常に難しいのですが、その方法がphpspot開発日誌さんのほうで紹介されております。

方法に関してはそちらを見ていただくとして、ポイントはfloatでしょうか。
これ指定しないとFirefox2.0で崩れます。

これはかなりいい感じの方法だと思います。
ただし、中央寄せしたい要素のheightが固定でないと完全な中央寄せはできないので、テーブルのセルを利用したものよりは柔軟性にかけるといったところでしょうか。

トラックバック(0)

このブログ記事に対するトラックバックURL: http://eternitydesign.net/mt/mt-tb.cgi/104

コメントフォーム

AUTHOR

名古屋でひっそりと活動中。
ホームページ制作、Flashコンテンツ制作など制作依頼がありましたらお気軽にご連絡ください。
ご希望の方には制作実績も同時にお伝えいたします。

TAG CLOUD