将包含div中的按钮的表单居中

Question

我试图将a对齐<form>在一个中心<div>.这就是我到目前为止所做的事情:

<div style="height:auto; margin: 0 auto; align:center;">
  <form style="width:50%; margin:0 auto;" onSubmit="return false;">
  </form>
</div>

这是形式的中心,但有没有其他方式以更专业的方式做到这一点？

我也有一个这种形式的按钮,默认情况下左对齐.我试图改变对齐但它失败了.

谁能帮我？

Answer 1

最简单的方法是从HTML中删除CSS并删除align:center.

这样button,左边自然对齐.

div{
    height:auto; 
    margin:0 auto; 
    border:1px solid blue;
}

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
}

HTML

<div>
  <form>
      <button></button>
  </form>
</div>

示例: http ://jsfiddle.net/kCt7k/

编辑:

我需要按钮居中.

对不起,误读了原来的Q.

在这种情况下,您可以使用 text-align:center

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
    text-align:center;
}

示例2: http ://jsfiddle.net/kCt7k/1/

但是,这可能会与表单中的其他元素混淆.

您可以将其设置button为block元素并对其应用边距.

button{
    width:100px;
    display:block;
    margin:0 auto;
}

示例3: http ://jsfiddle.net/kCt7k/2/