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

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

ぜひお試しを。

今日のわかった

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

同じテーマの記事
トラックバック

※当サイト内ページへのリンクがないと、受け付けない仕様になっています
トラックバック一覧
コメント
上の情報を保存する場合はチェック

現在、631記事を公開中

Movable Type 4.261 &php.gif

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