尝试在中心的div中对齐内容

Question

这应该是微不足道的，但考虑到我为标记设置样式的粒度，我无法在中心获取内容

标记本质上是：

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

样式表基本上是：

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

遗憾的是，这并没有将我的表格中的内容对齐。它们更靠近包含父元素（div类矩形）的左侧。我在这做错了什么？

Answer 1

试试这个

<强> 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