CODEWITHSUNDEEP
htmlvertical-alignment
HussienK
HussienK

Reputation: 3042

Vertically align image with text

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&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>

Upvotes: 0

Views: 85

Answers (2)

Firezilla12
Firezilla12

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

Zachary Kniebel
Zachary Kniebel

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

Related Questions