Can't center image

Discussion in 'HTML & Website Design' started by scart3r, Sep 14, 2007.

0
  1. #1
    scart3r, Sep 14, 2007 IP
  2. litebulb1

    litebulb1 Peon

    Messages:
    151
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well first I would suggest to not use tables. But looking at your source code it looks like your problem is actually coming from the table. If you remove the table your align="center" should work. but it would be much easier if you used CSS.
     
    litebulb1, Sep 14, 2007 IP
  3. scart3r

    scart3r Notable Member

    Messages:
    3,513
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    250
    #3
    OK, I haven't done any css stuff, and really don't have time to learn. Does anyone have any other solutions?

    Oh, and I can't get rid of the table, because I have to have the background image in the table....
     
    scart3r, Sep 14, 2007 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    No problem...

    <html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Traffic Planets</title>
</head>

<body background="http://www.trafficbunnies.com/demo/trafficplanets/blkbackground.jpg">

<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" width="642" height="304" bgcolor="#FFFFFF" align="center">
    <tr>
      <center><td width="100%" background="http://www.trafficbunnies.com/demo/trafficplanets/shuttle.jpg" height="304" align="center">
      <a target="_blank" href="http://www.trafficplanets.com">
      <img border="0" src="http://www.trafficbunnies.com/demo/trafficplanets/space_shuttle_in_space_hg_clr.gif" align="right" width="356" height="312"></a></td>
    </center></tr>
  </table>
  </center>
</div>

</body>

</html>
    Code (markup):
     
    blueparukia, Sep 14, 2007 IP
    scart3r likes this.
  5. scart3r

    scart3r Notable Member

    Messages:
    3,513
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    250
    #5
    Awesome! You totally rock :D

    Green rep definitely left for you :)
     
    scart3r, Sep 14, 2007 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    Thank you :)

    I do my best to help

    :D

    BP
     
    blueparukia, Sep 14, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The align property is deprecated though, and so is center. They are trying to move everyone into the stricter way of centering.

    The reason I think that you had problems in the first place is that align=center works for block elements like paragraphs, divs and tables... but images are inline, so they don't center the same.

    You can still use the same code as above, but instead of align=center, use margin: 0 auto; (top and bottom margins are 0, sides are determined automatically) and of course give the div a width.

    You can do the same thing with the table-- give it a width and make the side margins equal.

    Then again, all the code style here is old so I guess it doesn't matter (until you update the html code overall and use css and all that jazz), but you should know. : )
     
    Stomme poes, Sep 14, 2007 IP
    scart3r likes this.