文字とアイコン画像を合わせる

サイト上の文書の中にアイコンなどの画像を設置すると、ずれてしまって、キレイにいかないことありませんか?

こんな感じ ⇒ メールはこちら

そんなときは、スタイルシートで

img {vertical-align: middle;}

と設定すれば、全ての画像が真ん中になります。

特定の画像だけ指定したい場合は、

img.test{vertical-align: middle;}

とスタイルシートで設定し、htmlでは。

<img src=”mail.gif” class=”test”>

とclass=”test”を設定すればOKです。

スタイルシートを使わず、imgタグ内にstyle=” “で直接書き込む方法もあります。

<img src=”mail.gif” class=”test” style=”vertical-align: middle;”>

属性はtop、middle、bottomが指定可能です。

表示例

top : メールはこちら

middle : メールはこちら

bottom : メールはこちら

ぜひお試しを。

コメント

タイトルとURLをコピーしました