Question

This should be trivial, but given the granularity with which I am styling my markup, I am unable to get the content in the center

Markup is essentially:

<div class = "rectangle" id = "login">
    <form>
     <!-- bunch of labels and corresponding input fields -->
    </form>
</div>

The stylesheet is essentially:

.rectangle{ border:1px solid #ccc; width:500px; padding: 10px;}
#login{margin:auto;}
#login form {margin:auto;}

This unfortunately does not center align the contents my form. They are closer to the left of the containing parent element (div class rectangle). What am I doing wrong here?

Answer 1

Try this

CSS

.rectangle{ 
    border:1px solid #ccc; 
    width:500px; 
    padding: 10px;
    text-align:center;
}

HTML

<div class = "rectangle" id = "login">
    <form>
        <input type="text" name="txt1" />
        <input type="text" name="txt2" />        
    </form>
</div>​

DEMO.