<td align="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="20" height="20" align="middle">
<span style="text-align:right;">value</span>
</td>
here i am trying to align image to left and text to right inside TD.it is working but the problem is 'value' text is apearing at the top of the cell(TD).i want to align text to be at middle relative to the image size.
gurus:
any ideas..?Since you shouldn't use tables for layout, I have cunningly replaced <td> with <p>.<p style="vertical-align:middle;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="EVERY image should have an alt tag!" width="20" height="20" style="float:left;">
Value
</p>well..vertical-align:middle not working.it is still aligning at the top.Originally posted by lavalamp
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="EVERY image should have an alt tag!" width="20" height="20" style="float:left;">
Value
</p>[/code]
I think floating the image is what screws things up. If you just want the word value to be next to the image, centered vertically against the image, move the vertical-align: property out of the <p> tag (you could just remove it completely) and replace float: left; with vertical-align: middle;
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td>
value <img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="100" height="100" style="vertical-align: middle; ">
</td></tr></table>can you please try the following code.
please let me know if you have thougts on this.
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td width=""100%">
valueffffffff <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" style="vertical-align: middle; ">
</td>
</tr><tr>
<td width=""100%">
f <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" style="vertical-align: middle; ">
</td>
</tr></table>Something like this???
<table hack>
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td width="100%" align="right" valign="center">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" align="left">
valueffffffff
</td>
</table>
</table hack>
There's your basic table hack. Do you want to risk using CSS? We certaintly can get it to work with CSS, but 4.0 and older browsers will choke on it.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="20" height="20" align="middle">
<span style="text-align:right;">value</span>
</td>
here i am trying to align image to left and text to right inside TD.it is working but the problem is 'value' text is apearing at the top of the cell(TD).i want to align text to be at middle relative to the image size.
gurus:
any ideas..?Since you shouldn't use tables for layout, I have cunningly replaced <td> with <p>.<p style="vertical-align:middle;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="EVERY image should have an alt tag!" width="20" height="20" style="float:left;">
Value
</p>well..vertical-align:middle not working.it is still aligning at the top.Originally posted by lavalamp
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="EVERY image should have an alt tag!" width="20" height="20" style="float:left;">
Value
</p>[/code]
I think floating the image is what screws things up. If you just want the word value to be next to the image, centered vertically against the image, move the vertical-align: property out of the <p> tag (you could just remove it completely) and replace float: left; with vertical-align: middle;
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td>
value <img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="100" height="100" style="vertical-align: middle; ">
</td></tr></table>can you please try the following code.
please let me know if you have thougts on this.
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td width=""100%">
valueffffffff <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" style="vertical-align: middle; ">
</td>
</tr><tr>
<td width=""100%">
f <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" style="vertical-align: middle; ">
</td>
</tr></table>Something like this???
<table hack>
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr><td width="100%" align="right" valign="center">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/status_red.gif" width="100" height="100" align="left">
valueffffffff
</td>
</table>
</table hack>
There's your basic table hack. Do you want to risk using CSS? We certaintly can get it to work with CSS, but 4.0 and older browsers will choke on it.