(Tips & Tricks) Center divs

May 17, 2010

Center a div with text left aligned for *all* browsers

Source: http://flumpcakes.co.uk/css/center-div-ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Center div with text left-align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
	body {
		text-align: center; /* for IE */
	}
	#container {
		margin: 0 auto;   /* align for good browsers */
		text-align: left; /* counter the body center */
		border: 2px solid #000;
		width: 80%;
	}
	p      {margin: 0.3em 0.3em 0.5em 0.3em;}
    </style>
  </head>
  <body>
	<div id="container">
		<p>
                  This is a demo to show how to center a DIV in the center of
                  the screen from Internet Explorer 4 and up. Including all
                  modern browsers too.
                <p>
		<p>
                  The trick is to add text-align: center; to the body selector,
                  then add the usual margin: 0 auto; to the container selector
                  which you want centered.  Apply text-align: left; on the container
                  to counter the center align for body.
                </p>
	</div>
  </body>
</html>

See the example here

Update 2014 (learned from nginx startpage! :)), just use padding:

    <style type="text/css">
        #container {
                padding: 1em 5em;
        }
    </style>
    <div id="container">
        <div id="border">
              <p>
                 This is a demo to show how to center a DIV in the center of
                 the screen for all browsers today.
                 No real tricks are necessary anymore ;-)
                 Here's a bit more text to see the result: left-aligned
                 text in a centered box.
              </p>
        </div>
    </div>

See the example here

 
"If ignorance is bliss, you must be orgasmic."

Powered by Wordpress. Theme by Shlomi Noach, openark.org
© 1997 - 2020 KwaLinux Trainingen | Algemene voorwaarden | KvK: 10147727 | BTW-id: NL001873211B65 | Disclaimer