居中使用CSS形式(Center a form using css)

我想中心（页面中）使用CSS HTML表单。

我已经看过其他成员的有点类似的问题。但是，我不知道这一点

这是HTML表单：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</div>
</body>
</html>

这是CSS：

<style>
form{
  width: 700px ;
  margin-left: 0 auto;
}
label { 
    text-align:right; 
    width:100px; 
}
input { 
    margin-left: 10px; 
}
label.check, label.radio { 
    text-align:left; 
}
</style>

我试过很长一段时间。但我仍不能居中形式。任何指导做好？谢谢

Answer 1:

速记属性是margin ，而不是margin-left 。修复它，它就会为中心：

form {
  width: 700px ;
  margin: 0 auto;
}

这里的小提琴： http://jsfiddle.net/Tzr7D/

Answer 2:

在 “magin：0汽车;” 从任何拥有它的中心形式。您可能要添加的东西，将持有的形式和设置的东西宽度，使其表单设置为中心。比方说，比如像这样的表

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
<table>
<tr>
<td width="1024px">
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</td>
</tr>
</table>
</div>
</body>
</html>

我的形式之前添加该表。试试吧。希望这可以帮助。

文章来源: Center a form using css