html - 在 div 中居中包含按钮的表单

Question

我正在尝试对齐 <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。

这样，按钮自然地向左对齐。

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/

---

编辑:

I need the button to be centered.

抱歉，在原始问题中看错了。

在这种情况下，您可以使用 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/