如何在 CSS 中居中提交按钮？

Question

我正在创建一个表单，我希望所有的文本框都对齐并且提交按钮居中。这些是我得到的指示：

创建一个标签元素选择器，用块向左浮动 显示设置文本对齐到右分配宽度为 8em 设置一个 适当数量的填充配置和输入元素和 具有 12em 下边距的块显示的 textarea 元素选择器

这是我目前的代码：

form{
	float:left;
	display:block;
	text-align:right;
	width:8em;
}
input {
  display: block;
  margin-bottom:1em;
}
textarea#feedback {
  display: block;
  margin-bottom:1em;
}
.form{
margin-left: 12em;
}

<form role="form">
<div class="form">
<form>
 <label for="Name">Name*</label>
  <input type="form" name="Name" id="" value="" required><br>
  <label for="Email">Email*</label>
  <input type="email" name="email" id= value"" required>	<br>
  <label for="Experience">Experience*</label>
  <textarea rows="2" cols="20">
  </textarea><br>
  <input type="submit" value="Apply Now">
  </div>
</form>

我不知道我的 CSS 做错了什么。我尝试更改填充和边距，但没有任何效果。我的代码中缺少什么？任何反馈将不胜感激。

Answer 1

检查这种风格是否适合你。

form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
  min-width: 180px;
}
label{
  display: block;
}
input {
  display: block;
  margin-bottom:1em;
}
input[type="submit"]{
  display: block;
  margin: auto;
  width: auto;
  min-width: 50px;
}
textarea#feedback {
  display: block;
  margin-bottom:1em;
}

<form role="form">
<div class="form">
<form>
 <label for="Name">Name*</label>
  <input type="form" name="Name" id="" value="" required><br>
  <label for="Email">Email*</label>
  <input type="email" name="email" id= value"" required>	<br>
  <label for="Experience">Experience*</label>
  <textarea rows="2" cols="20">
  </textarea><br>
  <input type="submit" value="Apply Now">
  </div>
</form>

Answer 2

请在提交按钮中包含样式。

<input type="submit" value="Apply Now" style="margin:0 auto;">

参考：center form submit buttons html / css

Answer 3

首先让我们从修复 HTML 开始。

此行格式错误。

  <input type="email" name="email" id= value"" required>    <br>

需要

<input type="email" name="email" id="" value="" required> <br>

成为。

    <form role="form">
    <div class="form">
    <form>
    <label for="Name">Name*</label><br>
    <input type="form" name="Name" id="" value="" required>
    <label for="Email">Email*</label><br>
    <input type="email" name="email" id="" value="" required>
    <label for="Experience">Experience*</label><br>
    <textarea rows="2" cols="20"></textarea><br>
    <input type="submit" value="Apply Now">
    </div>
    </form>

现在我们已经固定了这个以及一些间距，我们可以开始将提交按钮居中。

现在我们将用 div 包裹提交按钮

<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>

剩下的就是设置 div 的样式，您可以通过找到最佳边距、文本对齐等方式来执行此操作。

.buttonHolder{ text-align: center; }

最终的 HTML：

<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>

Answer 4

这是工作小提琴：https://jsfiddle.net/qptgsc1e/

只需进行一些小的更改，替换此 CSS 和 HTML 即可。

如果您想查看代码更改，请查看here

form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}


<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required>  <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>