PDA

View Full Version : help with aligning text to Right of image and centered, Why's it so hard?



mobimad
Mar 24th, 2010, 04:27 PM
Hi i'am trying to align text to the right hand side of an image and centered vertically, but i have tried vertical-align, and cant get it to work.

Something so simple has got be fluxed;

here is the line of code i'am trying to make aligned central and to the right of the image:

echo "<img src='../icon/thumb/$pic' alt='image' width='70' height='70'/><br/><a href='$udesk>$desk </a>$info<br/>";

I have an image $pic
I have text as $desk
I have another bit of text $info

they always lurk to the bottom right handside of the image, how do get the text to be in the center using css

thanks
Jenna X

DJCMBear
Mar 24th, 2010, 04:46 PM
Hi i'am trying to align text to the right hand side of an image and centered vertically, but i have tried vertical-align, and cant get it to work.

Something so simple has got be fluxed;

here is the line of code i'am trying to make aligned central and to the right of the image:

echo "<img src='../icon/thumb/$pic' alt='image' width='70' height='70'/><br/><a href='$udesk>$desk </a>$info<br/>";

I have an image $pic
I have text as $desk
I have another bit of text $info

they always lurk to the bottom right handside of the image, how do get the text to be in the center using css

thanks
Jenna X

the code your echoing out show href='$udesk and it needs to have a ' at the end but back to the question if you dont have the text in something the it wont vertical-align and a single div cant do this, I would look up on how to vertical align a div and if that isnt the way you want to go then put the content inside a table like this


<table>
<tr>
<td valign="middle">your text goes here</td>
<td valign="top"><img src="image.jpg" alt="" /></td>
</tr>
</table>


and to write it in your code write this:


echo "<table>\n\t<tr>\n\t\t<td valign='middle'><a href='$udesk>$desk </a> $info</td>\n\t\t<td valign='top'><img src='../icon/thumb/$pic' alt='image' width='70' height='70'/></td>\n\t</tr></table>";

mobimad
Mar 24th, 2010, 05:00 PM
Hi I cannot use tables as im trying to design layout for mobile device.

Is there not a way to do this with CSS

for e.g.




echo "<div class='image'><img src='../icon/thumb/$pic' alt='image' width='70' height='70'/></div>"<div class='text'><a href='$udesk'>$desk </a>$info</div><br/>";

then havs CSS like this in some way

.image {
valign="top;
}

.text {
valign="middle:
}


Surely there must be way

Jenna

tomws
Mar 24th, 2010, 05:22 PM
You need floats. You can also use the align attribute on the image, but I don't think that's valid xhtml.

And that CSS in your last post is wrong. CSS should be in the format of key:value unless used in the tag where it's style="key:value;".

mobimad
Mar 24th, 2010, 05:33 PM
Floats..

Could you explain how i would use a float to achieve my goal, if you could give me a sample as to how css should be wriiten, i will be able to follow the correct path-way for further changes.

Thankyou
Jenna

tomws
Mar 24th, 2010, 05:36 PM
Google is a great tool. I found this link (http://www.tizag.com/cssT/float.php) searching for "floating images".