www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do I get something to be in the middle?

  1. #1
    Join Date
    Apr 2005
    Posts
    486

    How do I get something to be in the middle?

    Can someone tell me how I can get something to be exactly in the middle of the screen?

    I can't quite figure out how.
    I can float left or right: but not in the middle.

    Thanks.


    OM

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Assuming a fixed with layout, this would work:

    CSS:

    Code:
    #container{
       width:700px;
       margin:0 auto;
    }
    #left{
      float:left;
      width:150px;
    }
    #middle{
      float:left;
      width:400px;
    }
    #right{
      float:left;
      width:150px;
    }
    #footer{
      clear:both;
    }
    HTML:

    Code:
    <div id="container">
    <div id="left">
    
    </div>
    <div id="middle">
    
    </div>
    
    <div id="right">
    
    </div>
    
    <div id="footer">
    
    </div>
    </div>
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    To centre something via css, set a width and give the side margins auto width. So margin: 0 auto; in the css will set the top and bottom margins to zero, and the side margins to auto.

    Cheers
    Graeme

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Position it absolutely at 50% 50% with negative top/left margins half the pixel size of the thing you're positioning.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Why would you want to position it absolutely? There's no need to in most cases.
    Ryan Butler

    Ryan Butler.org

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Depends if you really want it in the "middle" of the page, which indicates vertical as well as horizontal centering. Note what OM2 said.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

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