CSSでコンテンツを天地中央に配置したい。
そんなときにおすすめなのが、『Vertical Centering With CSS』。CSSで天地中央に配置するテクニック集だ。
このエントリーでは、以下のようなソースで天地中央に配置する例がいくつか紹介されている。
<div id="floater">
<div id="content">
Content here
</div>
</div>#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
それぞれにいい点とよくない点が書かれているので参考になるだろう。
CSSで天地中央に配置するテクニック、チェックして一度見ていただきたい。
Editor's Note
今日はちょっと早起きして作業中っと。2月ももうすぐ終わりですねー。
Related Entry
- CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」
- Photoshopで作ったようなCSS3のタイポグラフィー
- CSS3で作るクールなお問い合わせフォーム
- floatした画像の横のテキストの回り込みをクリアするCSS
- CSS3を使ったボタンジェネレータ
- CSSだけでJavaScriptのような動きを実装するサンプル30
