画像をボックスの中の真ん中に表示したいんだけど、やり方わからない。

photogallery などで、メニュー部分のサムネイル表示を作るときのことを考えてて、壁に。

htmlが、

<ul>
<li><a href="#"><img src="foo.jpg" alt="foo" /></a></li>
<li><a href="#"><img src="bar.jpg" alt="bar" /></a></li>
...
</ul>

で、css が、

a{display: block; width: 120px; height: 120px;}

のとき、かつ、画像の幅と高さが一定ではない場合(aのwidth/heigth以内で)、画像を、a のボックス内の真ん中(水平/垂直ともに)に表示させる方法がわかりません。

僕は、こういうときは a 要素のマウスの反応する領域を一定に保ちたくなるらしいです。a:hover の領域を確保したいといいましょうか・・・。

幅が固定のエリアの場合は table を使えば逃げられるんだけど、可変エリアで使うとき li {float:left;} にして、列数を動的に変更させたいなぁなんて思いましてね。

一番簡単なのは、サムネイルのサイズをキッチリ決めてしまう事なんだろうけど、なんか悔しいし、他にも javascript を使った逃げもできそうだけど、これもスマートじゃないし。

ただの勉強不足ならいいんだけど、力技しか無理なのかなぁ・・・。

  • philsci

    こんな感じではいかがでせう?


  • philsci

    こんな感じではいかがでせう?


  • philsci

    あ、タグが(笑。

    a { display: block; width: 120px; line-height: 120px; height: 120px; text-align: center; }

    こんな感じで・・・背景画像なら、line-height ではなくて vertical-align を使います。

  • philsci

    あ、タグが(笑。

    a { display: block; width: 120px; line-height: 120px; height: 120px; text-align: center; }

    こんな感じで・・・背景画像なら、line-height ではなくて vertical-align を使います。

  • hideh

    あ、どもです。

    やってみましたが、上に詰められちゃうようです。(IE, Firefox on Win)
    どっかミスってますかねぇ?
    test

    まだ、ちょっとしかいじってないんであれなんですけど、
    cssってまだまだ、痒いところに手が届きませんね。

    htmlに無駄なdiv入れたり、javascript でゴニョゴニョすればできるんだろうけど、
    それは最終手段にしたいですし。

  • hideh

    あ、どもです。

    やってみましたが、上に詰められちゃうようです。(IE, Firefox on Win)
    どっかミスってますかねぇ?
    test

    まだ、ちょっとしかいじってないんであれなんですけど、
    cssってまだまだ、痒いところに手が届きませんね。

    htmlに無駄なdiv入れたり、javascript でゴニョゴニョすればできるんだろうけど、
    それは最終手段にしたいですし。

  • philsci

    あれ、ほんとですね。
    垂直方向で中央にしたい場合は、line-height しかないというのが相場です。
    それと、失礼、vertical-align は img タグの方につけるのでした。
    MD のエントリーに出してます(笑。

  • philsci

    あれ、ほんとですね。
    垂直方向で中央にしたい場合は、line-height しかないというのが相場です。
    それと、失礼、vertical-align は img タグの方につけるのでした。
    MD のエントリーに出してます(笑。

  • hideh

    test2

    キモは、line-height と vertical-align と。
    おぉ~できました。っと、Firefox で見てよろこんだんですが、
    冷静になってIE6で見たらやっぱり上端揃えになってしまいました。

    背景画像でやれってことですかねぇ・・・。
    文書構造の面から考えると、フォトギャラリーなんかの場合は img 要素で行きたい気がするんですけど。

  • hideh

    test2

    キモは、line-height と vertical-align と。
    おぉ~できました。っと、Firefox で見てよろこんだんですが、
    冷静になってIE6で見たらやっぱり上端揃えになってしまいました。

    背景画像でやれってことですかねぇ・・・。
    文書構造の面から考えると、フォトギャラリーなんかの場合は img 要素で行きたい気がするんですけど。