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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Alignment Question

    I am quite capable in CSS but one thing that has never worked for me in the past is universal centering for all resolutions. You can use absolute coordinates but obviously it will only look as good as the rez you are working on it. I'm pretty certain I could write a VB function to adapt the alignment per resolution but that makes things very sloppy. For tidiness sake, how does one keep things in CSS aligned to the middle of the page?

    I have tried using

    margin-left: auto
    margin-right: auto

    but no dice.... I will be googling in the mean....

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    body {
    	text-align: center;
    }
    #wrapper {
    	margin: 0px auto;
    }
    That centers it left and right... horizontally centering things is a little more difficult.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    The text-align: center declaration is not for centering block‐level content, but for centering text. Internet Explorer will allow you to get away with doing otherwise if you’ve set up your document such that it displays in backward compatibility mode, however.

    The margin: 0 auto declaration should work fine for keeping your layout centered in any resolution. Just remember that Internet Explorer doesn’t allow you to use it for centering purposes while in backward compatibility mode and that you can’t center a normal block‐level element (e.g., div) that doesn’t have a defined width.

    Anyway, if you want a dynamic layout, you can use a combination of absolute and relative units along with the min-width and min-height properties. Percentages and ems in particular are good for dynamic appearances.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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