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

  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.

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

  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.

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


    Chris

  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 09: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>.

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