Topic: Horizontal Centering of Images (Page 1 of 1)

OK, this is driving me mad. I want to center a single image horizontally at the top of a page, using CSS. I've read various posts on this forum, seached the internet, tried numerous suggestions, all with no luck! Finally I found this, from Suho1004 last year:

quote:

---

I tried it every which way I can think of, but nothing worked, which leads me to believe that neither text-align or auto width margins apply to images.

---

So, can it be done easily, and if so can anyone post a simple example that works?

Simon

Look at the CSS I use to center #content at http://www.runningwolf.com/

That'll do the trick.

You can wrap the image in a div, and give that text-align: center
Or you can use the

margin-left:50%; 

position:relative;

left:-XXpx;

where XX is half the width of your image.
The margin-left:50% way can cause problems if you're using a large image and resisze the browser smaller, some of the left part will be off the side of the screen.

Images can be centered in the normal way.

margin-left:auto;
margin-right:auto;
width:...;

Make sure you have a valid doctype or it won't work.

If you've done all that without success, post the page and we can take a look...

Here's an example of margin-auto not centering an image.
http://www.smith-web.net/test/test.html


edit: Ok, nevermind, I did get it to work. need to add display:block to the image to get auto margins to center it.
so to center an image it would be

#centeredImg {

    display:block;

    margin:0 auto;

}

[This message has been edited by Nathus (edited 11-28-2003).]

You've cracked it! It was the simple auto margin method I was trying to get to work, and as Slime said you've got the have the right doctype - I had HTML 4.0, which is obviously well out of date. I really must get a more up-to-date editor!

Many thanks to Nathus for providing a very clear example - just what I was looking for!

Simon

[This message has been edited by Simon Figg (edited 11-28-2003).]

[This message has been edited by Simon Figg (edited 11-28-2003).]

margin: auto won't work in IE.

Its all in the FAQ though:

:FAQ: How do I get vertical and horizontal centering with CSS?



___________________
Emps

The Emperor dot org

text-align aligns all inline content, so it would be the most logic in this case I think.