尝试在中心的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>?

演示.