2009年03月25日

テキストの横に並ぶ画像の位置合わせ その1

こんにちは
馬場です。

「テキストの横に並ぶ画像の位置合わせ」
について、2回に分けてお話します。

今回は、vertical-alignを使った方法を
ご紹介します。


「テキストの横に並ぶ画像の位置合わせ」と
言葉で表現してもピンと来ませんが、
サイトで更新があった項目などに
「New」などのアイコンが
表示されているのを
ご覧になったことがありますよね?

あの「New」アイコンの
縦方向の位置調整というイメージです。





▼ 指定なしの場合

何も意識せず、
テキストと画像を
横に並べてみました。

なんだか高さが合ってくれません。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p>新しい<img src="icon_new_01.gif" /> 新しい</p>


▼ vertical-align:middleを設定

画像が文字の高さの真ん中
(もしくは文字が画像の高さの真ん中)
にくれば良いので、
imgタグに
「vertical-align:middle」を
設定してみました。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。
真ん中に寄ったような気がしますが、
なんだか物足りません・・・。

フォントサイズによっては、
真ん中とは言い難い寄り方をしています。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new01">新しい<img src="icon_new_01.gif" /> 新しい</p>
<p class="new02">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new01 {

font-size:75%;

}

.new01 img,
.new02 img {

vertical-align:middle;

}


▼ vertical-alignに数値を設定

最近知りましたが、
「vertical-align」は
pxなど数値を指定することができるようです。

今回は、
-0.25emを指定することで対応しました。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new03">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new03 img {

vertical-align:-0.25em;

}


ただ、残念ながら、
ブラウザで文字サイズを変更した際は
表示位置がずれてしまいます。

ブラウザで
文字サイズを変更した際の
表示に関しては、
middle指定の方が
優秀のようです。



marginやpositionを使った対応方法
テキストの横に並ぶ画像の位置合わせ その2


HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:55 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。