页面上的中心表单

Question

我正在努力让我的表单以桌面为中心。它目前在左侧。

我尝试过usleep(1000000);和display: block以及margin-left: auto，但仍然很挑剔。

下面的图片显示了问题，我将添加一个片段和一个小提琴来帮助。提前致谢。

Jsfiddle：https://jsfiddle.net/r87h2L6n/

＆＃13;

＆＃13;

margin-right: auto

＆＃13;

/*********FORMS CSS*************/

form {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
form.contact label {
  display: block;
}
span {
  display: block;
  border: none;
  color: white;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
fieldset {
  width: 45%;
  float: left;
  border: none;
}
input.checks {
  width: auto;
}
.left {
  width: 45%;
  float: left;
}
.right {
  width: 45%;
  float: right;
}
input {
  border: none;
  border-bottom: 2px solid #959595;
  width: 300px;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
}
.bottom {
  border: none;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 300px;
}
.fa {
  margin-right: 10px;
}
legend {
  color: white;
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}
.button:hover {
  background-color: #670809
}
.button:active {
  background-color: #670809;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

要添加到Michael_B的答案，您的表单将设置为默认情况下将页面的整个宽度作为块元素占用，并且您也设置了它。保证金自动仅适用于块或内联块元素的元素，并且它们的宽度必须设置为指定值才能工作。

要解决您的问题，查看源代码，您可以通过删除CSS中fieldset元素上的浮点集并在该元素中将Margin设置为auto来获得您期望的结果。我不确定CSS规则中浮动的目的是什么，但是你不能将你设置的东西放在浮动中心。希望这有帮助

Answer 2

它没有居中的原因是你的表单元素是一个块级容器，因此它占据了页面的100％宽度。结果，没有空间用于居中。

正如你所写：

  

我尝试过display: block和margin-left: auto以及margin-right: auto，但仍然很挑剔。

好吧，如果你给一个元素display: block，它会消耗所有可用的水平空间。因此，margin-left: auto和margin-right: auto无效。

尝试为表单定义宽度（例如width: 30em），删除浮动规则和/或提供表单text-align: center，这会使子元素居中。

Answer 3

这不是你的form问题，而是fieldset ...再次。给这个旋转。

fieldset {
  width: 45%;
  margin: 0 auto;
  /* float: left; -- DELETE float: left if you want this centered */
  border: none;
}

更新：

如果你还想让提交按钮居中，那么这就是css。

.button {
  margin: 0 auto; /* ADDED THIS */
  display: block; /* Took inline-block out, just use block */
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}

LIVE DEMO