|
 |
|
|
|
| Thread title: The difinitive CSS centering? |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
10-04-2007, 03:47 PM
|
#1
|
Status: On Vacation
Join date: Sep 2007
Location:
Expertise:
Software:
Posts: 15
|
 The difinitive CSS centering?
Hey,
I come to you to pose a question that has definatly been asked many a time. What's the best way to center a div in CSS?
Normal instant response:
div {position:relative: top:0; margin:0 auto; width:Npx}
But is this always the best way of doing it? I've seen many other techniques each with thier own drawback. The drawback to this response is its not entirely browser compatible.
Other ways:
div {position:absolute; width:Npx; margin-left:-N/2px; left:50%;}
The second is completly browser safe, but in a browser smaller than N in width, the left gets cut off. Which is best. Due to me being a UK coder, i dont have an iphone yet, but i am sure i will have to re-invent some of my personal coding standards for it. /disucss?
|
|
|
|
10-04-2007, 04:16 PM
|
#2
|
Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:
Posts: 562
|
|
|
|
|
10-04-2007, 04:44 PM
|
#3
|
Status: On Vacation
Join date: Sep 2007
Location:
Expertise:
Software:
Posts: 15
|
Not much of a contribution as i did say that in my post :P
|
|
|
|
10-04-2007, 04:55 PM
|
#4
|
Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:
Posts: 562
|
margin: 0 auto is 99% cross-browser compatible. I don't think it works in IE 5 or less, but no one uses that anymore.
|
|
|
|
10-04-2007, 05:24 PM
|
#5
|
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise: Web design, XHTML/CSS coding
Software:
Posts: 16
|
div { width: xxxpx; margin: 0 auto }
Works in IE, Firefox, Opera, and Safari
|
|
|
|
10-04-2007, 06:26 PM
|
#6
|
Status: I Code Things
Join date: Aug 2005
Location: UK
Expertise:
Software:
Posts: 1,998
|
Originally Posted by .com 
div { width: xxxpx; margin: 0 auto }
Works in IE, Firefox, Opera, and Safari
|
Thats actually right an a correct/update on daz's method. The margin:0 auto; does need a width.
|
|
|
|
10-04-2007, 07:18 PM
|
#7
|
Status: Senior Member
Join date: Nov 2004
Location: Sweden
Expertise:
Software:
Posts: 857
|
Adding to the posts above.
That method doesn't work when IE is in Quirksmode. (correct me if im wrong havn't checked it out myself) 
|
|
|
|
10-04-2007, 07:52 PM
|
#8
|
Status:
Join date: Dec 2004
Location: California, US
Expertise:
Software:
Posts: 406
|
Originally Posted by hjalmar
Adding to the posts above.
That method doesn't work when IE is in Quirksmode. (correct me if im wrong havn't checked it out myself) |
Ew... Quirksmode 
Best Regards,
Patrick 
|
|
|
|
10-04-2007, 08:16 PM
|
#9
|
Status: Member
Join date: Jan 2007
Location:
Expertise:
Software:
Posts: 311
|
Code:
body {
text-align: center; /* IE Fix */
}
.containerNameHere {
width: ***px; /* Width required for margin centering */
margin: 0 auto;
text-align: left; /* Re-align text to the left */
}
|
|
|
|
10-05-2007, 03:55 PM
|
#10
|
Status: On Vacation
Join date: Sep 2007
Location:
Expertise:
Software:
Posts: 15
|
Amross's fix is the best method (despite 90% of these responses not reading the actual post haha). The ie fix works. Also remember you have to really set a min-width in the body for completeness.
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed