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 を使った逃げもできそうだけど、これもスマートじゃないし。
ただの勉強不足ならいいんだけど、力技しか無理なのかなぁ・・・。