CSS：无法让提交按钮居中[重复]

Question

很奇怪，我今天花了一个小时试图找出我做错了什么。有一个电子邮件注册表单。四个输入字段和一个提交按钮。在我的设计中，提交按钮应该位于四个字段的中心。但是，无论我使用还是不使用 float:left; 按钮都是左对齐的。或明确：两者；或保证金：0自动；换句话说，通常的嫌疑人。

这里是网站。表格在底部：http://ellismarsalis2017.jasonmarsalis.com/

代码如下：

#footerForm {
  position: relative;
  float: none;
  width: 728px;
  height: auto;
  margin: 0 auto;
  padding: 18px auto 0;
}

footer form input {
  float: left;
  color: #2a358f;
  width: 44%;
  background: #edc53e;
  border-radius: 8px;
  margin: 0 2% 14px;
  font-size: 18px;
  padding: 0 .5%;
  border: none;
}

footer form input.signUp {
  font-family: "clarendon-urw", serif;
  float: none!important;
  clear: both;
  background: #2a358f;
  color: #edc53e;
  margin: 0 auto;
  font-size: 18px;
  padding: 8px 24px;
  border: none;
  text-align: center;
}

footer p {
  padding: 28px 0;
}

<div id="footerForm">
  <form name="" method="post" action="http://www.yoursite.com/box.php">
    <input name="name" type="text" id="name" value="Your Name">
    <input name="field1" type="text" id="field1" value="Your City">
    <input name="email" type="text" id="email" value="Your Email Address">
    <input name="field2" type="text" id="field2" value="Your State">
    <input name="p" type="hidden" id="p" value="7">
    <input type="hidden" name="nlbox[1]" value="1">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
  </form>
</div>

Answer 1

你应该把它放在 DIV 部分并使它的样式 text-align:center 像这样：

<div style="text-align:center;">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

或使用类和 css 代码：

HTML

<div class="submitsection">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

CSS

.submitsection {
    text-align:center;
}