Web vs Designer[ウェブ vs デザイナー]

パパなりたてWebデザイナーが、仕事やプライベートで気づいたことをデザイン・イラスト・画像・写真などを織り交ぜ公開中

CSSで上下に中央配置

CSSでページレイアウトをしていて、いくつか困る局面に遭遇
しますが、その中のひとつに上下に対しての中央配置が
あります。

tableを使用すれば、 valign="middle"で難なくできてしまうの
ですが、これがスタイルシートとなると厄介です。

今までごまかしごまかしでpositionやlineheightあたりを使い
レイアウトしていたのですが、どうも納得いってませんでした^^;


なにかいい方法がないものかと調べてみると、ありました!

ヨモツネットさまでとても詳しくその方法を紹介されております。

---------------------------------------------------
CSSはこんな感じ(ヨモツネットさまより参照)

div.sample1{ }

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

/*\*//*/
* html div.sample1 div{
display:inline-block;
}
/**/

---------------------------------------------------


いやあ、これは凄く便利ですねぇ〜☆
mac IEにも配慮してるところもさることながら、これをご自分で閃いて
いるところが素晴らしいです。

僕なんかは閃くより誰かが見つけていないかまず検索して
しまいますw

でも、こういう方達のテクニックはとても参考になりますね!

このような有意義な情報を無料で公開しておられることにも感謝しな
ければなりませんね☆

スタイルシートも、ただ普通に使うだけではなくて、色々試行錯誤
しながら極めると凄く面白いだろうなと、今回つくづく思いました。



コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://kazzuu.blog43.fc2.com/tb.php/53-164910b8

 | HOME | 

Calendar

« | 2009-07 | »
S M T W T F S
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

Monthly

Categories

Recent Entries

Recent Comments

Recent Trackbacks

Appendix

カズクン

カズクン

FC2ブログへようこそ!

FC2Ad

FC2ブログ 紹介予定派遣

  • seo