画像とテキストを揃えることができませんか？

Question

問題：私は画像にテキストを揃えたいと思います。意味、私はテキストが真ん中にあることを望みます。 <img>上

<div style="margin-top:0px"> 
 
    <p style="margin-top:2px"> 
 
     <img src="images/pdf-icon-24.png" alt="Dermatology_Referral_Guidelines" class="float-left" /> 
 
     <a href="Downloads/PhyDownloads/Dermatology_Referral_Guidelines.pdf" target="_blank">Dermatology Referral Guidelines</a> 
 
    </p> 
 
</div>

Answer 1

使用vertical-align: middle;。

**これは1行のテキストに対してのみ機能します。

img { 
 
    vertical-align: middle; 
 
}

<p> 
 
    <img src="http://placehold.it/200x40/fc0"> 
 
    Some text here. 
 
</p> 
 

 
<p> 
 
    <img src="http://placehold.it/200x40/fc0"> 
 
    Topsail broadside handsomely draught interloper aye killick prow lugsail execution dock. Man-of-war spike Sea Legs clap of thunder tender belay ho parley grapple heave to. 
 
</p>

注： Iは、テキストが画像と同じ行/ラインではなく、それを下回ることになっていることを仮定しました。画像のY軸の中央に揃えられ、画像のx軸ではないことを意味します。