Topic: Horizontal Centering of Images (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=11108" title="Pages that link to Topic: Horizontal Centering of Images (Page 1 of 1)" rel="nofollow" >Topic: Horizontal Centering of Images <span class="small">(Page 1 of 1)</span>\

 
Simon Figg
Nervous Wreck (II) Inmate

From: Dublin, Ireland
Insane since: Oct 2003

IP logged posted posted 11-27-2003 13:52 Edit Quote

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

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 11-27-2003 15:02 Edit Quote

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

That'll do the trick.

Nathus
Nervous Wreck (II) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 11-27-2003 19:23 Edit Quote

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

code:
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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 11-27-2003 19:29 Edit Quote

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...

Nathus
Nervous Wreck (II) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 11-28-2003 03:06 Edit Quote

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

code:
#centeredImg {
display:block;
margin:0 auto;
}




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

Simon Figg
Nervous Wreck (II) Inmate

From: Dublin, Ireland
Insane since: Oct 2003

IP logged posted posted 11-28-2003 09:12 Edit Quote

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).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 11-28-2003 15:10 Edit Quote

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

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 11-28-2003 19:38 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu