Text in the middle of image

Discussion in 'HTML & Website Design' started by winsonlee, Oct 23, 2007.

0
  1. #1 
    
 <div id="audio-bubble" style="display:none">    <a href='assistance.php'>    <img src="/antsigs/spacer.png" style="width: 249px; height: 87px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Purple_Small.png', sizingMethod=scale);"/>AUDIO</a>  </div>
    HTML:
    The image that I have is a button. How can i align the Audio text in the middle of the image ?
     
    winsonlee, Oct 23, 2007 IP
  2. Sophonax

    Sophonax Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can't you simply do a <div id="audio-bubble" style="display:none" align="center">?
     
    Sophonax, Oct 24, 2007 IP
  3. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #3 
    
<div id="audio-bubble" style="display:none">    <a href='assistance.php'>    <img src="/antsigs/spacer.png" style="width: 249px; height: 87px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Purple_Small.png', sizingMethod=scale);"/><span style="float:left; position:relative; top:-50px; text-align:center; width:249px;">AUDIO</span></a>  </div>
    Code (markup):
    That will work but its not how I would do it. I'd have spacer.png as a jpg/gif and set as background image for anchor tag allowing text to be on top of image (would mean a lot less code). Maybe you need a transparent image which is why i just amended code to work.
     
    webdesigner, Oct 24, 2007 IP