CONFIDELIC

max-heightとvertical-alignの組み合わせによる表示不具合

スマホ向けのコーディングをしていた時に、どうしても思い通りの配置にできない現象が発生してしまった。

以下のような条件で作成していた。
・元画像サイズ 縦26px　横40px　を縮小して表示するため　max-width と max-height をそれぞれ20pxと指定。
・この画像の外側には２pxのボーダーを設定し、固定サイズ(縦20px横20px)のボックス内に配置する。
・この時、内側の画像は、左右中央・上下中央配置とする。

タグはこんな感じ


＜p class="gazou"＞＜a＞＜img src="img/001.jpg" alt="画像" /＞＜/a＞＜/p＞


CSSはこんな感じ


p.gazou{
margin:3px 5px 2px 0;
}

p.gazou a{
display:table-cell;
width:20px;
height:20px;
border:2px solid #CCC;
-webkit-border-radius:2px;
text-align:center;
}

p.gazou img{
max-width:20px;
max-height:20px;
vertical-align:middle;
}


こうした時、画像の上に少し余分な余白が発生してしまい、上下中央には配置できなくなり、2~3pxほど下に寄った配置になってしまった。
これを元画像サイズのまま使用した場合はきちんと上下中央に配置できた。

画像サイズを半分のサイズにして配置したのだが、元サイズ縦40px横26pxが縮小されて縦13px横20pxになったため、それを20px20pxの枠内に収めた場合、上下どちらかに1pxの配置ずれが起こるのはやむを得ないが、今回はそれ以上のずれとなった。
また、vertical-align:middle;が有効になる場合のセレクタも、max-height、max-widthの使用有無により変わる結果となった。

今のところ解決策が見つかっていないが、max-とvertical-alignの組み合わせは相性が悪いのかなという感じです。
とりあえず解決策としては画像をCSSで縮小するんじゃなくて、プログラム側で半分サイズにするかな。