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

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

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

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

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をコピーしました