東京の風景。勉強したこと。感じたこと。の雑記帳。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS で高さの違う要素を上下方向に中央揃えして横に並べる.

<ul> と <li> を使って何らかの要素を横並びにするとき,
常套手段としては各 li 要素に float: left; を効かせたりしますが,
高さの異なる要素に対して行うと上揃えになってしまいます.
まぁそれでいい場合は良いんですが,
中央揃えとか下揃えとかにしたい場合(サムネイル並べたりとか)もあるよね.
ってことでサンプルがこんな感じになっております.
サンプルてきとーでサーセンw

詰まるところ, display で ul.row 下の各 li 要素を table-cell にしてしまいます.
こうすることでセルにしか使えなかった vertical-align が効きます.
ついでに IE6, IE7 対策もこんな感じで OKです.
ここでは ul, li に対してやってますが,別に div とかでもできます.便利.

ヨモツネットさんに感謝(http://www.yomotsu.net/wp/?p=387


ul.row li {
    display: table-cell;
    vertical-align: middle;
}
/* for IE6 */
* html ul.row li {  
    display: inline;  
    zoom: 1;  
}  
/* for IE7 */
*:first-child+html ul.row li {  
    display: inline;  
    zoom: 1;  
}
スポンサーサイト
コメント
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2011/10/14(金) 12:31 | | #[ 編集]
コメントの投稿
管理者にだけ表示を許可する
プロフィール

ひかる

  • Author:ひかる
  • SE っぽいバイトで学費を稼ぎつつ,コンピュータの研究をしている大学院生.主に P2P のような分散システムを扱っている.

    最近のマイブームは写真を撮ること.

    眼と頭が悪い.万年金欠.


    本ブログに記載されている情報は,自己責任の下でご利用ください.
    損害等が発生しても当方は一切責任を負いません.
天気予報

-天気予報コム- -FC2-
FC2カウンター
タグcloud
最近の記事
最近のコメント
最近のトラックバック
カレンダー
09 | 2017/10 | 11
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 - - - -
ブログ内検索
RSSフィード
リンク
ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。