将图像与文字垂直对齐
问题描述:
我有一个图像需要与一个框内的文本块对齐。将图像与文字垂直对齐
问题是我无法使文本与图像的顶部对齐。盒子顶部和图像之间总是有空间。
这里是我的代码为箱体内部的图像和文字在这里是它的样子: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’s Institute for Clinical Evaluative Sciences, Canada’s preeminent centre for science-based health policy development, describes as extremely distressing. “The most comprehensive data in Canada has been denied to us,” 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>
答
您可以使用VALIGN = “顶” 的TD 喜欢里面:
<td width="134" valign="top">
或者您可以使用CSS propertie: { 垂直对齐:最佳; }
答
你可以尝试垂直对齐(vertical-align
)两种元素(文本和图像的)至text-top
或top
。
您也可以通过将图像单独对齐到text-top
来实现此目的。没有jsFiddle,我无法测试这个,但是。
例子:
img {
vertical-align: text-top;
}
+0
感谢jsFiddle,我不知道这样一个伟大的工具存在! – HussienK
+0
不用担心:)这就是我在这里为 –
谢谢,这对我来说! – HussienK
很高兴帮忙... – Firezilla12