Center <div>

codemaster · 11-07-2009, 06:43 PM

Hello,

I need to be able to center (both horizontally and vertically)

HTML Code:

<div style="position: fixed;">Sample content</div>

and I have found some suggestions elsewhere, but I also want to have it cross-browser compatible.

I've tried

HTML Code:

<div style="position: fixed; width: 100px; margin-left: auto; margin-right: auto;">Sample content</div>

but nothing happens, and if it did, it wouldn't align it vertically.

jasonJ · 11-09-2009, 06:44 PM

The following seem to work both in IE 7 and FF so I guess you can consider it cross-browser ;-)

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		#centered-div {
			background-color: #f8f8f8;
			border: 1px solid #d6d6d6;
			padding: 10px;

			position: absolute;
			top: 50%;
			left: 50%;
			width: 400px;
			height: 200px;
			margin-top: -100px; /* set to a negative number 1/2 of your height */
			margin-left: -200px; /* set to a negative number 1/2 of your width */
		}
	</style>
</head>
<body>
	<div id="centered-div">I am a centered div</div>
</body>
</html>

codemaster · 11-10-2009, 03:24 AM

Thanks!

codemaster · 11-10-2009, 03:30 AM

Quote:

Originally Posted by jasonJ

HTML Code:

    <style type="text/css">
        #centered-div {
            background-color: #f8f8f8;
            border: 1px solid #d6d6d6;
            padding: 10px;

            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            margin-top: -100px; /* set to a negative number 1/2 of your height */
            margin-left: -200px; /* set to a negative number 1/2 of your width */
        }
    </style>

Of course I want it to be

Code:

position: fixed;

which doesn't work in IE...

jasonJ · 11-10-2009, 05:41 PM

It does work with position:fixed. At least in IE 7 (don't know about IE 6 bacause I haven't got one now).
Perhaps you omitted a DOCTYPE declaration (see the very top of my example).
If you omit one, then browsers trigger the quirks mode, and as you can read here, IE supports position:fixed only when in standards mode (that is, with a DOCTYPE declaration).

Try again the example, which I modified a bit so that the page is scrollable:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		#centered-div {
			background-color: #f8f8f8;
			border: 1px solid #d6d6d6;
			padding: 10px;

			position: fixed;
			top: 50%;
			left: 50%;
			width: 400px;
			height: 200px;
			margin-top: -100px; /* set to a negative number 1/2 of your height */
			margin-left: -200px; /* set to a negative number 1/2 of your width */
		}
		
		p {
			height:1500px;
		}
	</style>
</head>
<body>
	<div id="centered-div">I am a centered div</div>
	<p>A long paragraph</p>
</body>
</html>

codemaster · 11-10-2009, 10:14 PM

It works, thanks!

11-07-2009, 06:43 PM	#1
codemaster Code Master Join Date: Dec 2008 Posts: 21	Center <div> Hello, I need to be able to center (both horizontally and vertically) HTML Code: <div style="position: fixed;">Sample content</div> and I have found some suggestions elsewhere, but I also want to have it cross-browser compatible. I've tried HTML Code: <div style="position: fixed; width: 100px; margin-left: auto; margin-right: auto;">Sample content</div> but nothing happens, and if it did, it wouldn't align it vertically.

11-10-2009, 05:41 PM	#5
jasonJ Senior Member Join Date: Sep 2006 Location: Poland, EU Posts: 267	It does work with position:fixed. At least in IE 7 (don't know about IE 6 bacause I haven't got one now). Perhaps you omitted a DOCTYPE declaration (see the very top of my example). If you omit one, then browsers trigger the quirks mode, and as you can read here, IE supports position:fixed only when in standards mode (that is, with a DOCTYPE declaration). Try again the example, which I modified a bit so that the page is scrollable: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #centered-div { background-color: #f8f8f8; border: 1px solid #d6d6d6; padding: 10px; position: fixed; top: 50%; left: 50%; width: 400px; height: 200px; margin-top: -100px; /* set to a negative number 1/2 of your height / margin-left: -200px; / set to a negative number 1/2 of your width / } p { height:1500px; } </style> </head> <body> <div id="centered-div">I am a centered div</div> <p>A long paragraph</p> </body> </html> __________________ Visit my personal web page Last edited by jasonJ; 11-10-2009 at 07:48 PM..*

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


<a href='http://d1.openx.org/ck.php?n=ac86e9f0&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://d1.openx.org/avw.php?zoneid=36053&source=_blank&cb=INSERT_RANDOM_NUMBER_HERE&n=ac86e9f0' border='0' alt='' /></a>

11-10-2009, 03:24 AM	#3
codemaster Code Master Join Date: Dec 2008 Posts: 21	Thanks!

11-10-2009, 10:14 PM	#6
codemaster Code Master Join Date: Dec 2008 Posts: 21	It works, thanks!