Web Design Forums

stealthcow · 08-11-2005, 07:43

I want to center an image in the middle of a page using CSS but there doesnt seem to be a way to do this

In the past I wouldve used two tables, the first with a width and height of 100% and another inside which is centered and vertically aligned to the middle, and hey presto, whatever the size of the screen, the content would be in the middle of the browser

anyone know of a way to do this in CSS?

jase1000 · 08-11-2005, 07:54

for a 500px x 500px image position it:

50% left and -250px margin left
50% top and -250px margin top

Stickman · 08-11-2005, 07:59

http://www.wpdfd.com/editorial/thebox/deadcentre1.html
http://www.wpdfd.com/editorial/thebox/deadcentre2.html
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

stealthcow · 08-11-2005, 08:00

what about an image that i dont know the size of? eg its generated by a database

the fact that you have to apply margins etc doesnt fix the problem of different screen sizes and resolutions...

stealthcow · 08-11-2005, 08:05

cheers stickman!

and heres the result

http://www.yum.biz/redid/

jase1000 · 08-11-2005, 08:10

And the difference between those techniques was?

stealthcow · 08-11-2005, 08:13

an explanation

jase1000 · 08-11-2005, 08:18

08-11-2005, 07:43	#1 (permalink)
stealthcow knocking heads Join Date: Jul 2003 Location: London, UK Posts: 1,945	CSS vertical and horizontal centering I want to center an image in the middle of a page using CSS but there doesnt seem to be a way to do this In the past I wouldve used two tables, the first with a width and height of 100% and another inside which is centered and vertically aligned to the middle, and hey presto, whatever the size of the screen, the content would be in the middle of the browser anyone know of a way to do this in CSS?

08-11-2005, 08:18	#8 (permalink)
jase1000 turd 2.0 Join Date: Aug 2005 Location: Right on your tit end Posts: 1,163	lol

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

08-11-2005, 07:54	#2 (permalink)
jase1000 turd 2.0 Join Date: Aug 2005 Location: Right on your tit end Posts: 1,163	for a 500px x 500px image position it: 50% left and -250px margin left 50% top and -250px margin top

08-11-2005, 07:59	#3 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,563	http://www.wpdfd.com/editorial/thebox/deadcentre1.html http://www.wpdfd.com/editorial/thebox/deadcentre2.html http://www.wpdfd.com/editorial/thebox/deadcentre3.html http://www.wpdfd.com/editorial/thebox/deadcentre4.html

08-11-2005, 08:00	#4 (permalink)
stealthcow knocking heads Join Date: Jul 2003 Location: London, UK Posts: 1,945	what about an image that i dont know the size of? eg its generated by a database the fact that you have to apply margins etc doesnt fix the problem of different screen sizes and resolutions...

08-11-2005, 08:05	#5 (permalink)
stealthcow knocking heads Join Date: Jul 2003 Location: London, UK Posts: 1,945	cheers stickman! and heres the result http://www.yum.biz/redid/

08-11-2005, 08:10	#6 (permalink)
jase1000 turd 2.0 Join Date: Aug 2005 Location: Right on your tit end Posts: 1,163	And the difference between those techniques was?

08-11-2005, 08:13	#7 (permalink)
stealthcow knocking heads Join Date: Jul 2003 Location: London, UK Posts: 1,945	an explanation

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)