2009年04月24日

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

こんにちは
馬場です。

前回(前々回?)は、
テキストの横に並ぶ画像の位置調整について
vertical-alignを使用した対応をご紹介しました。

今回は、
vertical-alignとは別の方法、
positionやmarginを使った対応方法を
ご紹介します。

vertical-alignを使用した場合と
それほど表示が変わるわけではないので、
こんな方法もあるという程度で
ご覧ください。


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






▼positionを使った対応


positionを使って調整する場合は、
position:relativeを指定し、
topやbottomで調整します。

その1でご紹介した、
vertical-alignの数値指定と同じように
微調整することができますが、
フォントサイズの変更には、
ついていけません。。。

あいかわらず、Newアイコンがデカすぎるのは、
気にしません。

▼スクリーンショット

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

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

position:relative;
top:4px;

}



▼marginを使った対応


marginを使って調整する場合は、
margin-bottomの値で調整します。

▼スクリーンショット

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

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

margin-bottom:-4px;

}


margin-topでもできそうなイメージですが、
マイナスにするとIEでは反応しますが、
Firefoxでは変化なしです。

プラスにすると
テキストも一緒についてくるので
うまくいきません。


▼スクリーンショット

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


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

margin-top:-50px;

}



▼vertical-alignとposition(margin)を使った対応


vertical-alignの数値指定や
positionを使った方法、
margin-bottomを使った対応で
微調整はできましたが、
ブラウザで文字サイズを変更した際には
対応できませんでした。

どうしても納得できない方は、
vertical-align:middleと
positionを使った方法または
marginを使った方法を
合わせてみてください。

完全に真ん中とは言いませんが、
ほぼ真ん中を保っていると思います。

このときは、なぜかFirefoxでも
margin-topのマイナスが効くんですよね。。。。

vertical-alignがbaseline(default)の時以外は、
margin-topのマイナスが効くようです。


▼スクリーンショット

※スクリーンショットは、windows Firefox2.0で
文字サイズを大きくしたものです。
上は、positionのみの対応、
下は、vertical-align:middleとmarginの対応です。


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

margin-top:-4px;
vertical-align:middle;

}

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

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

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

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