before疑似要素で画像を指定した場合の文字位置

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.test:before{
float:left;
padding-top:0px;
padding-right:10px;
content: url("../img/icon.gif");
}

---------------------------------------------------------
HTML
---------------------------------------------------------
<p class="test">
あああああ
</p>

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/03/13 08:12

　画像は置換インライン要素ですから、contentプロパティで内容を追加すると、当然ベースラインを合わせて表示されます。

　そこで、positionプロパティで位置を指定する必要があります。そのとき、absoluteを使用するなら、他の要素と切り離されて直近のstatic以外の親コンテナブロックの位置が基準になります。relativeを使用すると本来の位置からずらして表示させることが出来ますが、この場合本来表示されるべき位置・サイズにそれがあると他の要素が判断しますから注意してください。
　floatはいくらなんでも使わないでしょう。

この回答へのお礼

お礼が遅くなってしまい申し訳ありませんでした。
回答いただきありがとうございました。

お礼日時：2013/05/20 13:11