将图像与文字垂直对齐

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; 
}