navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

center image

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> center image
Page: [1]
 
J-man

 

Posts: 936
From: Canada
Status: offline

 
center image - 2/10/2006 1:30:48   
hey, i would like to use CSS to center an image in the browser window both horizontally and vertically - so when the window is resized it re-centers. Hoping for CSS1 type method having browser compatibility ....

suggestions? :)

J-man

< Message edited by J-man -- 2/10/2006 4:57:52 >
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: center image - 2/10/2006 5:57:42   
#img { margin: 0 auto; }

(where #img is whatever your image is called should do it horizontally. Vertically, I seem to remember there is a way but I can't recall off-hand. There was a discussion about it around here recently, I think started by RickP - a search'll probably turn that up.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to J-man)
Kitka

 

Posts: 2520
Joined: 1/31/2002
From: Australia
Status: offline

 
RE: center image - 2/10/2006 6:38:01   
http://www.wpdfd.com/editorial/thebox/deadcentre2.html

_____________________________

Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**


(in reply to J-man)
Mane

 

Posts: 105
Joined: 7/7/2005
Status: offline

 
RE: center image - 2/27/2006 19:52:15   
Wow, that's the simplest centering soulution I've ever seen!

(in reply to Kitka)
Tailslide

 

Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online

 
RE: center image - 2/28/2006 3:17:27   
Here's an unobtrusive Javascript way of doing it:

http://www.alistapart.com/d/footers/footer_variation1.html

It uses the normal margin:0 auto to centre the box horizontally but it also uses JS to centre the box vertically. With JS switched off you just get the horizontal centering.

I quite like this technique because with the Dead Centre version the centred box disappears off screen when the screen is made very small.

Anyway - just another method for you to store away for future use!

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Mane)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> center image
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts