How to align an image to the center?

[Norman]

Maybe this is a stupid question, but I do not remmeber the answer! I've try to search, with no luck! I've seen the align attribute is deprecated..

[jlhaslip]

CSS :

img {margin: 0 auto;text-align:center // for older browsers}

or in-line:

style="margin: 0 auto; text-align:center;"

[Norman]

It doesn't work. Here my code (not the entire code):

<!-- Start Personal Navigator Content Code --><table border="1" align="right" height="100px" width="100px" background="newvbstyle/misc/avatarhomebg.gif"><tr>   <td>  <img src="http://localhost/vbstyles/images/icons/icon1.gif" alt="Avatar" style="margin: 0 auto; text-align:center;" />   </td></tr>   </table><p style="font-size:10px; font-weight: bold;">Hi, {$bbuserinfo['username']}! This is your Personal $vboptions[bbtitle]'s Navigator!</p><!-- / End Personal Navigator Content Code -->

[pulpfiction]

Try this......<table border="1" align="right" height="100px" width="100px" background="newvbstyle/misc/avatarhomebg.gif"><tr> <td style="width:100%;text-align:center;margin: 0 auto;"> <img src="http://localhost/vbstyles/images/icons/icon1.gif" alt="Avatar" /> </td></tr> </table>

[croatiankid]

CSS :

img {margin: 0 auto;text-align:center // for older browsers}

or in-line:

style="margin: 0 auto; text-align:center;"

img is inline by default, inline elements are centered via text align.for the purpose you're most likely using it,img{display:block;margin:0 auto;} should do it. depending on your doctype, add "text-align:center;"

[jlhaslip]

Ahhhh! Haven't gotten you off of Tables yet. Soon, I hope.

[Norman]

Ok, thank you guys. I will try!

[Norman]

Try this...... <td style="width:100%;text-align:center;margin: 0 auto;">

Yes, this work! Thanks!

[Norman]

Excuse me guys if I bump this thread, but I have the same problem. I want to align to the center an image, but if I put this code, it still remain on the left of the page. What's wrong?

<img src="images/skullheader.gif" style="text-align:center; margin: 0 auto;" border="0" align="middle" width="638" height="104" alt="Skullheader"  />

[mistergalarza]

Excuse me guys if I bump this thread, but I have the same problem. I want to align to the center an image, but if I put this code, it still remain on the left of the page. What's wrong?

<img src="images/skullheader.gif" style="text-align:center; margin: 0 auto;" border="0" align="middle" width="638" height="104" alt="Skullheader"  />

Here are some things I see potentially wrong.You're aligning text in an image tag. That won't fly.What's your doctype? I would just use relative positioning with a parent wrapper and the same margin:0 auto.

[mistergalarza]

Here are some things I see potentially wrong.You're aligning text in an image tag. That won't fly.What's your doctype? I would just use relative positioning with a parent wrapper and the same margin:0 auto.

The reason it worked for the previous poster was because he was aligning the text within a cell.

[justsomeguy]

And get rid of the HTML align property, don't use both HTML and CSS to do the same thing, use one or the other.

[IamTK]

O please, the easiest way is to just do

[quote]<center>[/quote]

or if you wanna fancy it up do

float:center;

and use div for the image. Or just use the img tag.

[jlhaslip]

float:center

The only values for float are left, right and none.http://www.w3schools.com/css/pr_class_float.asp

[justsomeguy]

.. and the <center> tag is no longer valid in the more recent specs.

[Norman]

Cleaned:

<div style="text-align: center;"><img src="images/skullheader.gif" border="0" width="638" height="104" alt="Skullheader"  /></div>

Now it works.

[Norman]

Now I have the same problem with a table. If I put <table style="text-align: center;"> it doesn't work.

[Synook]

You have to put the style in the <td> tags

<td style="text-align: center;">

[Norman]

But I want the table centered in the page.. not the td content centered.

[Synook]

Well, make the parent of the table have text-align:center; ...

<div style="text-align:center; "><table><!-- Table cells here --></table></div>

[Norman]

Man, it doesn't work. And this put me crazy. Check my code:

<!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"><!-- Skullhead --><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="style.css" rel="stylesheet" type="text/css"  /><title>Skullmonkeys</title></head><!-- / Skullhead --><body><div style="text-align: right;"><table border="0"><tr>  <td><img src="images/skullheader.gif" border="0" width="638" height="104" alt="Skullheader" /></td></tr></table></div><!-- / Skullmonkeys Official Web Site --></body></html>

[BrotherBill]

Try changing your <div>, see if that helps.<div style="text-align:center;">

[Norman]

What do you mean with "try changing your div"? What should I put there?

[BrotherBill]

Right now, your division declaration reads;<div style="text-align: right;"> Change it to read;<div style="text-align:center;"> It's the same thing Synook pointed out. That will shift your table back to the center of the division.

[Norman]

Ops, my mistake. I have changed it and I have forgot to set it again to the center. However, it still doesn't work. I have a flash menu in my page. Could be that create this error?