Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-04-2012, 01:52 PM   PM User | #1
SHEPME
New Coder

 
Join Date: Mar 2011
Posts: 87
Thanks: 7
Thanked 0 Times in 0 Posts
SHEPME is an unknown quantity at this point
Centering a div ?

Good Morning:
Can anyone assist me in centering a div both vertically as well as horizontally.
I have created a div and assigned the following css rules to it.

#box{width:500px;height:400px;background-color:red;margin:10% auto;}

It is perfectly centered on my page, however as soon as you use the zoom feature in the computer (ctrl "-" "+") the box still remains centered but starts to get dragged to the top of the screen.
I have tried many different combinations.
margin:50px auto;
margin:auto auto;
etc,etc.....
No luck.
I would like to have this div centered no matter what the user does with either screen resolution or zoom function.
Is it even possible?
Thanks
Shepard
SHEPME is offline   Reply With Quote
Old 08-04-2012, 02:23 PM   PM User | #2
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
The margin-auto method will only centre horizontally.

It depends on what else is on your page.. try this or other Google results.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
AndrewGSW is offline   Reply With Quote
Old 08-05-2012, 06:04 PM   PM User | #3
Major Payne
Regular Coder

 
Join Date: Aug 2005
Location: MS
Posts: 745
Thanks: 7
Thanked 65 Times in 63 Posts
Major Payne is an unknown quantity at this point
Getting content to stay or act the way you want it to when resizing the browser's viewport makes for lots of problems. Even flexible pages have problems with this as it is not so much the resolution, but the browser's viewport size at any resolution.

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

Might look at the coding for centered content and modify as needed:

http://pastebin.com/p7phM4wA
http://paynelessdesigns.pastebin.com/9351BVL5
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
No Image: http://nopeople.com/CSS%20tips/verti...CSS/page4.html
__________________
☠ ☠RON☠ ☠

Last edited by Major Payne; 08-05-2012 at 06:07 PM..
Major Payne is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:48 PM.


Advertisement
Log in to turn off these ads.