レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。
cssのdisplay:table-cellで解決
html
[php]<ul id="nav">
<li><a href="#"><img src="
nav_home.png" alt="ホーム"></a></li>
<li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li>
<li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li>
</ul>[/php]
css
[php]#nav ul {
display: table;
}
#nav li {
display: table-cell;
padding-top: 1px;
}[/php]
親要素にdisplay:tableを設定し、揃えたい子要素にdisplay: table-cell;を設定。
これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。
vertical-alignを設定しても解決出来なかったので、padding-top: 1px;を設定して対応しました。
このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。