html - 试图在中心对齐 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>​

演示。