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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    How to vertically and horizontally center a div w/o absolute positioning

    http://www.mathannotated.com/tests/about.html

    I know about margin: auto but that seems to only work for horizontal center.

    How would I vertically center?

    And yes, I've looked up a lot of tutorials on the web but they all say you have to use absolute positioning which is a clumsy solution.
    The website I am building is http://www.mathannotated.com. My questions often pertain to it. This is my site plan: http://www.mathannotated.com/images/...ctory-tree.gif
    Thank you for your help in all matters. All earnest efforts in helping me will be credited with Thanks. -ptrcao

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    See http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    Edit: Err.. without absolute position? Absolute position is not as clumsy as you feel. Situations are there where no other method of positioning would do the tricks and this is one of them.

    In fact, all CSS properties might be clumsy, when we use them in wrong contexts.
    Last edited by abduraooft; 04-08-2011 at 05:16 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ptrcao (04-08-2011)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello ptrcao,
    Yes, nothing wrong with the absolute positioned method. It's simple and works very well in all modern browsers.

    Here is a method without absolute positioning that also works well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (04-08-2011)

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Thanks ab and excav. That solution will do. =)

    btw ab, how do you put a red border around your edits?
    The website I am building is http://www.mathannotated.com. My questions often pertain to it. This is my site plan: http://www.mathannotated.com/images/...ctory-tree.gif
    Thank you for your help in all matters. All earnest efforts in helping me will be credited with Thanks. -ptrcao

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    how do you put a red border around your edits?
    There's an [edit][/edit] tag in the BBCode. See http://www.codingforums.com/misc.php?do=bbcode#edit
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ptrcao (04-09-2011)


  •  

    Posting Permissions

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