www.webdeveloper.com
Results 1 to 9 of 9

Thread: center a DIV in the center of the browser window

  1. #1
    Join Date
    Jun 2004
    Location
    London UK
    Posts
    541

    center a DIV in the center of the browser window

    Hi all

    I'm using this to center a DIV in the center of the browser window:

    PHP Code:
    #mainframe {
    position:relative;
    margin20px auto 0px auto;
    text-align:center;
    overflowvisible;
    width:765px;
    height524px;
    visibilityvisible;

    But it's still to the LEFT.

    Can anyone see what I'm doing wrong.

    This works on my other site.

    Chris
    Successful people ask better questions, and as a result, they get better answers - Anthony Robbins

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It will work if you use a valid DTD

  3. #3
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    You may need to set the parent element (I imagine that would be your body) as text-align:center. What browser are you using? I think what you have there should work in Firefox but not IE because... well, I'm sure you know why.

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Originally posted by BonRouge
    You may need to set the parent element (I imagine that would be your body) as text-align:center.
    That property (text-align) only applies to inline-elements, so the DIV would not be affected. Because there is a width present and because the left and right margins are both set as "auto," the DIV should be positioned in the center, horizontally.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273

  6. #6
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Unless you are using IE 5.x, Fang told you why it didn't work.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  7. #7
    Join Date
    Jun 2004
    Location
    London UK
    Posts
    541
    cheers fang...that was it!!!


    Chris
    Successful people ask better questions, and as a result, they get better answers - Anthony Robbins

  8. #8
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Originally posted by Jona
    That property (text-align) only applies to inline-elements, so the DIV would not be affected. Because there is a width present and because the left and right margins are both set as "auto," the DIV should be positioned in the center, horizontally.
    Looking at this again (and after checking) - are you sure about this?

    I actually think I was right in what I said there.

    EDIT: AAAGGGHHH! I take it back. I think I had an invalid DTD too. I needed it for that. Such a fool!
    Last edited by BonRouge; 10-20-2004 at 08:35 PM.

  9. #9
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Originally posted by BonRouge
    Looking at this again (and after checking) - are you sure about this?

    I actually think I was right in what I said there.

    EDIT: AAAGGGHHH! I take it back. I think I had an invalid DTD too. I needed it for that. Such a fool!
    Don't consider any statement as true unless the standard - the W3C - says it is; though browsers have done an excellent job at translating the words of the W3C, they are apt to bugs and faultiness. Therefore, it's best to look-up each term at W3.org to make sure you're correct in what you say.

    Originally located at the W3C CSS2 Specification
    This property describes how inline content of a block is aligned.
    See also: <http://www.w3.org/TR/CSS2/visudet.ht...hs_and_margins>.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

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