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