Centering an image horizontally

[xwb]

Is there a better way of doing this? The best I can come up with is

   <table width="100%">
      <tr>
         <td width="49%">&nbsp;</td>
         <td><img src="animage.jpg" /></td>
         <td width="49%">&nbsp;</td>
      </tr>
   </table>

I can't figure out how to do it with divs or spans.

 

[cygmorg]

<style type="text/css">
img {
display: block;
margin:0 auto;
}
</style>
<div class="center">
  <img src="favicon.ico">
</div>

 

[cygmorg]

forgot to point out, you can also set styles to the div:

style type="text/css"
.center {
}

 

[TrojanWarBlade]

Or maybe this:

<img style="margin: 0 50%;" src="favicon.ico">

Seemed to work on FireFox but I've not tested on any other browsers.


Trojan.

 

[xwb]

cygmorg Thanks - img {display: block;margin:0 auto;} works quite well. Am I supposed to put anything in the .center style definition? Seems to be ok with nothing in it. It is even OK without the definition.

Trojan - this does exactly what you tell it. If the image is very wide, it will still give a 50% margin on the left. I tried 15% and that seemed to be OK but when I shifted from a 1024x768 montior to 1920x1080 it didn't quite work.

 

[cygmorg]

It will work fine without the div, because the styles are being applied to the 'img' tag.
If you want, you could put it in a div and then center that instead:

<style type="text/css">
.center {
text-align: center;
}
</style>
<div class="center">
  <img src="favicon.ico">
</div>

I personally prefer doing it this way, but its up to you.

You could just have:

<style type="text/css">
img {
display: block;
margin: 0 auto;
}
</style>
  <img src="favicon.ico">

Sorry to confuse you with the div

Hope that helps

 

[TrojanWarBlade]

The 50% I suggested applies to both left and right sides so it should give centering regardless.
Not sure if it's a browser specific issue.


Trojan.

 

[xwb]

Found that this works quite well too

<center><img src="favicon.ico"></center>

 

[johnwm]

The <center> tag was deprecated in HTML 4.01 and should not be used in current designs. See

http://www.w3schools.com/TAGS/tag_center.asp

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Vragabond]

Albeit it works, it is using a deprecated code. Unfortunately, asking such a simple question yields many solutions that might not be best. I would advise you to forget all but the last cygmorg's post. The two solutions (with #1 being best and #2 second best) are the two complete and correct solutions.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[xwb]

OK, I won't be using it on new designs but this is for a hypertext application on Win2K, which, I think, has IE5.5. It is just a cheap UI for data entry. It will probably be used for another 5-10 years until someone decides to replace the whole suite.