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

10/01/26 Comment(0) Trackback(0) はてなブックマーク - 文字とアイコン画像を合わせる

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

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

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

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 : メールはこちら

ぜひお試しを。

今日のわかった

細かいところですけど、目に付きます。

同じテーマの記事

現在、583記事を公開中

Movable Type 4.261 &php.gif

製品レビューポータル「MONO-PORTAL」 rankbanner.png人気blogランキング
あわせて読みたい
フィードメーター - わかったブログ
Twitter / kankichi
457
458