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で天地中央に配置するテクニック、チェックして一度見ていただきたい。
今日のCREAMU
今日はちょっと早起きして作業中っと。2月ももうすぐ終わりですねー。
関連するエントリー
- floatした画像の横のテキストの回り込みをクリアするCSS
- CSS3を使ったボタンジェネレータ
- CSSだけでJavaScriptのような動きを実装するサンプル30
- クロスブラウザで動作するCSSグラデーション
- CSS3で何が実現できるかがわかるジェネレータ
- クールなCSSグリッドフレームワーク
