[SOLVED] Centering an image with CSS without moving anything else on the page.

Oh, I've looked and searched and all the methods move the menu, or skip a line.

How can I center an image so it's centered in all browsers, on all resolutions, and stay on the same line without affecting anything else?

http://www.simplifiedimpact.com/index.html

See above, the "SI" logo is centered on my laptop, but not on my desktop.
Every method I've tried (placing it within a centered <p> class, depreciated <center>..etc) moves the menu or skips a line, how can it stay on the line it's on and not budge anything else?

Surely it's simple?

Thanks,
Ed

It's really very simple.

Every item that you want to centre should have:

• A specified width
• margin: 0 auto

(This will also set top/bottom margins to nothing. You can of course change that.)

Now everything should be centred in all browsers except IE 5. It's unnecessary to bother with IE 5 (hardly anyone uses it), but if you wish to fix it I can show you the hack.

So, why is this failing to work for your logo, yet succeeding for the other two items? Well, <img>s are inline elements. You need to make it display as a block-level element. Inline elements are not formatted in the same way.

You can do this with the CSS display: block applied to your <img>. Now it will act as a block box, so the margins will work.

Now with me...(yeah I know annoying)

The easier you make it sound, the more confused.

If I was to put this directly into css and html what exactly would it look like?


Thanks so much,
Ed

HTML:

Code: Select all

<img id="logo" src="http://simplifiedimpact.com/images57/silogo.png">

CSS:

Code: Select all

#logo {
display: block;
margin: 0 auto;
}

Works Perfectly...thank You!

Ed

A pleasure.