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 · ベストアンサー

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

お礼

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