Hai, i want to align text to Horizontaly center to the icon as shown in the red line. my current code as follows <div><img src="file:///D|/Icon Items/favourites32.png" width="32" height="32" /> Add to favorite </div> Code (markup):
I assume you want your text to be at the position of the red line. That is vertically aligned. First this: an image requires an alt attribute, always.. Try this piece of html code... <div id="favorites"> <img [B]alt="" [/B] src="file:///D|/Icon Items/favourites32.png" /> <p>Add to favorites</p> </div> Code (markup): ...together with this css code #favorites img {float: left; width: 32px; height: 32px;} #favorites p {float: left; margin: 6px 0px 0px 5px;} Code (markup):
fex, first, saary for the late reply. but this does not work <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #favorites img {float: left; width: 32px; height: 32px;} #favorites p {float: left; margin: 6px 0px 0px 5px;} </style> </head> <body> <div #favorites><img src="../../search.png" alt="Ad to favorites" width="32" height="32" /> <p>Add to favorites</p> </div> </body> </html> HTML:
No need for all that excess code. You can do it like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> img.top {vertical-align:middle;border:0;width:32px; height:32px; } </style> </head> <body> <div> <img class="top" src="file:///D|/Icon Items/favourites32.png" alt="" /> Add to favourites </div> </body> </html>
Oxi, Thank you, this code give a closer look what i expected. dont you slightly feel the text has gone to up and not correctly aligned as the red line in my first post?
Its perfectly aligned vertically but due to the shape of the image its appearing to not be. Highlight the image on the page so that the whole image itself is visible (star + background), you will see that the text is perfectly centered. Its a misleading shape The bigger you make the image itself, it becomes less misleading.
Just had another quick look at it, also appears that once the image gets to around the size of yours, due to the text size being larger it slightly outlines, never noticed that before You could just create the image as the image and text combined and add alt and title tags for SEO, may get it aligned easier for a smaller image such as that.