将包含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。

这样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/

---

编辑：

  

我需要按钮居中。

对不起，误解了原来的问题。

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

Answer 2

  

[有]还有其他方法可以更专业吗？

<div style="height:auto; margin: 0 auto; align:center;">

没有人提到此错误，但align不是CSS属性。

也许您将align视为<div>属性......

<div align="center">

但是，这已被弃用，因此使用<div>正确地在text-align内水平居中...

<div style="text-align: center;">

Answer 3

“更专业”可能需要将您的样式属性移动到单独的CSS文件中。除此之外，这似乎是一种非常合理的方法。

您是否希望我猜出您使用错误按钮做了什么？

Answer 4

css很好，但IMO“正确”的方法是通过单独的css文件。与应该通过单独的jquery或js的onsubmit相同。对于按钮问题，我需要从样式表和您正在使用的任何内联css中查看css。可能是其他任何事情超越你想要的行为的原因。

使用css的一个提示是，如果元素行为不正确，请在其周围放置1px纯色边框，然后您可以在浏览器中查看它的呈现位置。然后，您可以将边框放在其他项目周围，查看事物重叠的位置或将元素推出所需位置。