How do I get vertical and horizontal centering with CSS? — OZONE Asylum, home of the Mad Scientists

FAQ

How do I get vertical and horizontal centering with CSS?

This page's ID: 5339

You are editing "How do I get vertical and horizontal centering with CSS?"

Who can edit an FAQ?	Anyone registered may edit an FAQ.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	[b]Horizontal Centering[/b] In this example, <body> [i]contains[/i] the centered element and #center [i]is[/i] the centered element: [code]body { text-align: center; } #center { margin-left: auto; margin-right: auto; text-align: left; }[/code] "margin-left: auto" and "margin-right: auto" is all that is needed to center an element in standards-compliant browsers. However, it doesn't work in IE5/Win and earlier. Fortunately, there is a workaround. IE5 incorrectly centers block level elements with the property "text-align: center". So we apply "text-align: center" to the element [i]containing[/i] the centered element, and use "text-align: left" [i]on[/i] the centered element, in order to override the previous rule. Also note: You [i]should[/i] be able to replace "margin-left: auto" and "margin-right: auto" with the a shorthand such as "margin: auto" or "margin: 0 auto". The shorthands, however, are known to fail in certain versions of Opera. So it's recommended that you declare the left and right margins seperately. It may be redundant, but it's necessary redundancy. [b]Vertical Centering[/b] Its vertical aligning that causes the problems. the vertical-align property will align things, like an image, in relation to the text but it is often required to vertically center whole DIVs for a layout. setting the top and bottom margins to auto should, in theory, work - but it doesn't. However, u-neek has worked out an example: [url=http://spiritual-pixel.com/there/vertical.html]vertical and horizontal centering[/url] [url=http://exp.hicksdesign.co.uk/articles/archive/000030.php]vertical centering with CSS[/url] (2004-08-18 broken link) -------------------------------- Relevant threads: [url=http://www.ozoneasylum.com/Forum8/HTML/000292.html]horizontal & vertical centering[/url] [url=http://www.ozoneasylum.com/Forum8/HTML/000272.html]Vertical Centering[/url] [url=http://www.ozoneasylum.com/Forum4/HTML/000193.html]Centering Opening Logo[/url] [url=http://www.ozoneasylum.com/Forum4/HTML/000201.html]Ozone we have a problem[/url] -------------------------------- Relevant links: [url=http://www.bluerobot.com/web/layouts/]BlueRobot's Layout Reservoir[/url] has a couple of solutions ot horizontal centering: The one with [url=http://bluerobot.com/web/css/center1.html]margins set to auto[/url] is my preferred solution (and is the one used here but there is also a trick using [url=http://bluerobot.com/web/css/center2.html]negative margins[/url] [url=http://spiritual-pixel.com/there/vertical.html]vertical and horizontal centering[/url] - u-neek's example. [url=http://www.damowmow.com/playground/demos/centering/]Centring[/url] - this seems to only work in Mozilla though. [url=http://www.xs4all.nl/~rinswind/3columns-span.html]A horizontal centering with some <span>'s [/url] <--- Shameless plug from Rinswind 2th [url=http://www.xs4all.nl/~rinswind/3columns-div.html]The same but now with <div>'s [/url] -------------------------------- Relevant FAQs: [internallink=5340]How do I get vertical and horizontal centering with JavaScript?[/internallink] ________________________ [internallink=4626]Emperor[/internallink] [small][i](Added by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Thu 17-Oct-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Thu 17-Oct-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=ozphactor]ozphactor [/url] on Mon 25-Aug-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=ozphactor]ozphactor [/url] on Mon 25-Aug-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Fri 10-Oct-2003)[/i][/small] [small](Edited by [internallink=1424]Tyberius Prime[/internallink] on 08-19-2004 03:07)[/small] [small](Edited by [internallink=298]Rinswind 2th[/internallink] on 03-17-2005 23:32)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu