如何将我的提交按钮置于CSS中心？

Question

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

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

这是我到目前为止的代码：

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

这是工作小提琴：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>

Answer 2

首先让我们开始修复HTML。

此行的格式错误。

<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 class="buttonHolder">
<input type="submit" value="Apply Now">
</div>

既然我们有固定的和一些间距，我们可以开始集中提交按钮。

现在我们将使用div

包装提交按钮

.buttonHolder{ text-align: center; }

然后剩下的就是设置div的样式，你可以做到这一点，你找到最好的边距，文本对齐等。

<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>

最终HTML：

caffe

Answer 3

检查此样式是否适合您。

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 4

请在提交按钮中添加样式。

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

参考：center form submit buttons html / css