Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Central Page Content Alignment

    Hi,

    I have been ripping my hair out and screaming purple-faced obscenities at my computer for the last hour, trying to get my page content to align centrally in all web browsers (i.e. not relying on the I.E. hack mentioned in the pinned topic on this sublect). I was so dippily chuffed when I finally managed to do it, that I thought I should post it! (it could be smartened up and reduced in size with CSS, but it's only an example, so I'm not fussed).

    <smug mode>
    Here it is - Mike's central page alignment code which doesn't rely on any kind of hacks - also, it scrolls when the page gets too narrow to display all the content.
    </smug mode>

    Full webpage:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Central Alignment Test</title>
      </head>
    
      <body>
        <div style="top:0px;left:0px;width:100%;height:100%;position:absolute">
          <div style="
    	top:50px;
    	width:500px;
    	height:600px;
    	margin-left:50%;
    	left:-250px;
    	background:#CCFFFF;
    	position:absolute">
    	
    	<div style="
    	  top:100px;
    	  left:50px;
    	  width:300px;
    	  background:#3333FF;
    	  color:#FFFFFF;
    	  position:absolute;
    	  font-size:20px;
    	  font-family:sans-serif;
    	  padding-left:10px;
    	  line-height:40px">
    	  Central
    	</div>
    	
    	<div style="
    	  top:280px;
    	  left:100px;
    	  width:300px;
    	  background:#3333FF;
    	  color:#FFFFFF;
    	  position:absolute;
    	  font-size:20px;
    	  font-family:sans-serif;
    	  text-align:center;
    	  line-height:40px">
    	  Alignment
    	</div>
    	
    	<div style="
    	  top:460px;
    	  left:150px;
    	  width:300px;
    	  background:#3333FF;
    	  color:#FFFFFF;
    	  position:absolute;
    	  font-size:20px;
    	  font-family:sans-serif;
    	  text-align:right;
    	  padding-right:10px;
    	  line-height:40px">
    	  Test
    	</div>
          </div>
        </div>
      </body>
    </html>
    I have tested it using IE, Moz and FF. It would be interesting to know if someone can "break" it.

    Mike.

  • #2
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    To center a div, you use:

    Code:
    margin: 0 auto;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •