views:

42

answers:

2

Here's a simple web page. I would like the text as well as the image to be vertically centered in the cell. I would like the text to the left of the image, but that shouldn't be a problem...

Could you help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
    <link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table border="1" style="width: 100%">
    <tr>
        <td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td></td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

default.css. Add to it as you see fit.

body{

    font-size:12pt;
    }
}

Update:

I take back some previous comments, including saying that Evan's answer worked.

The following worked. Note the "*". Evan's answer didn't include the . What does the "" mean?

.style1 * { vertical-align: middle; }

+1  A: 

Because you're using a table for formatting. Simply add .style1 { vertical-align: middle }. The text should remain to the left of the image.

Evan Carroll
I voted you up and I'll probably mark your response the answer because you technically answered the question, but I'd like to keep the question opened momentarily to see if someone would answer my follow up question.
Velika
+1  A: 

The asterisk means "any descendent of this class"; be careful using it, though, because it means ALL descendant elements will receive a particular style.

Note 1: Be aware that you have too many right braces in your CSS.

Note 2: Also, the other answer you received won't work if the text is bigger than the image. You didn't give a size for the image.

Robusto