Reputation: 3042
I have an image that I want aligned with a block of text inside a box.
The problem is that I can't get the text to align with the top of the image. There is always a space between the top of the box and the image.
Here is my code for for an image and text inside the box and here's how it looks like: 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>
Upvotes: 0
Views: 85
Reputation: 110
You can use valign="top" inside of the td like:
<td width="134" valign="top">
OR you can use the CSS propertie: { vertical-align: top; }
Upvotes: 2
Reputation: 4794
You could try vertically aligning (vertical-align
) both of the elements (the text and the image) to text-top
or top
.
You may also be able to achieve this by simply aligning the image alone to text-top
. Without a jsFiddle, I cannot test this, however.
Example:
img {
vertical-align: text-top;
}
Upvotes: 1