將圖像與文字垂直對齊

Question

我有一個圖像需要與一個框內的文本塊對齊。

問題是我無法使文本與圖像的頂部對齊。盒子頂部和圖像之間總是有空間。

這裏是我的代碼爲箱體內部的圖像和文字在這裏是它的樣子：http://paulcwebster.com

<div style="width:1000px;height:155px;border:1px solid black;"> 
    <table border="0" cellpadding="2" cellspacing="0" width="100%"> 
     <tbody> 
      <tr> 
       <td width="134"><a href="index.html"><img src="gfx/adverse-reactions.jpg" alt="" border="0" height="150" width="176"></a></td> 
       <td width="1827"><font color="blue" size="2"><a href="gfx/VanMagAdverseReactionsApril2013.pdf" target="_new">Adverse Reaction</a></font> 
Vancouver Magazine April 2013<br><br><em>British Colombia's firing of scientists closely involved in staging major studies of physician prescribing practices, and the safety of a wide array of drugs is a situation that Dr. David Henry, CEO of Toronto&rsquo;s Institute for Clinical Evaluative Sciences, Canada&rsquo;s preeminent centre for science-based health policy development, describes as extremely distressing. &ldquo;The most comprehensive data in Canada has been denied to us,&rdquo; he says, noting that the B.C. government has failed to respond to repeated inquiries from alarmed scientists across Canada.</em></td> 
      </tr> 
     </tbody> 
    </table> 
    <br> 
</div> 

Answer 1

您可以使用VALIGN = 「頂」 的TD 喜歡裏面：

<td width="134" valign="top"> 

或者您可以使用CSS propertie： { 垂直對齊：最佳; }

Answer 2

你可以嘗試垂直對齊（vertical-align）兩種元素（文本和圖像的）至text-top或top。

您也可以通過將圖像單獨對齊到text-top來實現此目的。沒有jsFiddle，我無法測試這個，但是。

例子：

img { 
    vertical-align: text-top; 
}