こんにちは。 最近徐々にjQueryをいじるのが楽しくなってきたデザイナーのツチヤです。 テーブルレイアウトでは楽に出来ていたのに、HTMLとCSSでは実現が厳しい! という事がよくあるのですがjQueryのおかげで簡単にクリアできるようになりました。 そのうちの一つをご紹介します。 リストページ等で、 ・縦横サイズの違う画像を並べる ・画像は固定のサイズBoxの縦横中央に配置したい というレイアウトをする場合、テーブルレイアウトでは tdをalign=”center”、valign=”middle”にすれば可能ですが、 CSSでは一工夫必要です。 そこでjQueryを使って画像の縦横サイズと親のBoxサイズのマージン値を求めて 代入する処理をすることにより、スッキリ実現できるようになります! ※display: table-cell(テーブルの構造を表現することができるCSSプロパティ)
![縦横比が異なる複数の画像を縦横中央に配置するjQuery | サイブリッジラボブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e82e2c864f8e014b0448593dedfe46486c4e1fd5/height=288;version=1;width=512/http%3A%2F%2Fwww.cybridge.jp%2Fimg%2Fcommon%2Flogo_cybridge_m.gif)