www.webdeveloper.com
Results 1 to 8 of 8

Thread: center horizontal and vertically

  1. #1
    Join Date
    Jan 2005
    Posts
    592

    center horizontal and vertically

    how do i center a div right in the center of the screen horizontally and vertically purly using css

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    To center horiz.:
    Code:
    body {text-align: center;}
    #wrapper {margin: auto 0; padding: 0; text-align: left;}

  3. #3
    Join Date
    Jan 2005
    Posts
    592
    hmm i must do something wrong. its not working for me. not in ie and not in firefox

    used this code

    HTML Code:
    <body>
    <head>
    <style>
    body {
    	text-align: center;
    }
    #wrapper {
     	margin: auto 0; 
    	padding: 0; 
    	text-align: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    test
    </div>
    </body>

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Whoops - I missed something.... you need to place the width in the wrapper.
    Code:
    <style type="text/css">
    body {
    	text-align: center;
    }
    #wrapper {
    width: 600px; 	
    margin: auto 0; 
    	padding: 0; 
    	text-align: left;
    }
    </style>
    You can change that value to whatever you want.

  5. #5
    Join Date
    Jan 2005
    Posts
    592
    still not working. the text is always at the top right corner. in firefox right at the side and in ie its a little bit away from the right side.

    any ideas why?

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Hmmmm..... Might be easier for you if you consulted here: http://www.maxdesign.com.au/presentation/center/

  7. #7
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    That still only addresses the horizontal. This addresses both: Center Page Content Horizontally and Vertically (without <table>s)

  8. #8
    Join Date
    Dec 2005
    Location
    McLean, VA
    Posts
    58
    Use the link above. But as for the previous regarding Horizontal rule. You had margin: auto 0; when it should read margin: 0 auto;
    Last edited by Rezon; 10-02-2006 at 04:08 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles