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

您可以在td中使用valign =“top” 像：

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

或者您可以使用CSS属性： { vertical-align：top; }

Answer 2

您可以尝试将两个元素（文字和图片）垂直对齐（vertical-align）到text-top或top。

您也可以通过简单地将图像单独对齐到text-top来实现此目的。但是，如果没有jsFiddle，我无法测试它。

示例：

img {
    vertical-align: text-top;
}

将图像与文本垂直对齐

2 个答案: