Question

出于某种原因，我无法将提交按钮置于中心位置。我已经尝试了从text-align: center;到margin: 0 auto;的所有内容到auto左边和右边距。我试试按钮不会居中。我没有做什么？

.contactForm {
  border: 2px solid black;
  background-color: #F0F0F0;
  width: 40%;
  margin: 0 auto;
  padding: 40px;
}
.contactButton {
  margin-top: 15px;
  margin-right: auto;
  margin-bottom: 15px;
  margin-left: auto;
  width: 425px;
  font-size: 20px;
  font-weight: bold;
  padding: 14px;
  cursor: pointer;
  background-color: #800000;
  border: none;
  color: #FFFFFF;
  text-align: center;
}

<div class="contactForm">
  <form action="" method="post" id="mycontactform">
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
      <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
  </form>
</div>

Answer 1

很难居中，因为它在标签内。标签也是内联元素，并且会在按钮周围调整大小。因此text-align: center和其他解决方案无效。

在下面的代码片段中，我将标签显示为一个块元素，它自动占用父元素的可用宽度。然后您可以轻松地将按钮置于其中：

添加的内容：

label[for="contactButton"] {
  display: block;
  text-align: center;
}

整个代码：

.contactForm {
  border: 2px solid black;
  background-color: #F0F0F0;
  width: 40%;
  margin: 0 auto;
  padding: 40px;
}
.contactButton {
  margin-top: 15px;
  margin-right: auto;
  margin-bottom: 15px;
  margin-left: auto;
  width: 425px;
  /* Make sure the button isn't too wide on small screens */
  max-width: 80%;
  font-size: 20px;
  font-weight: bold;
  padding: 14px;
  cursor: pointer;
  background-color: #800000;
  border: none;
  color: #FFFFFF;
  text-align: center;
}

label[for="contactButton"] {
  display: block;
  text-align: center;
}

<div class="contactForm">
  <form action="" method="post" id="mycontactform">
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
      <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
  </form>
</div>

Answer 2

在父div上使用text-align:center。

小提琴：http://jsfiddle.net/gopal/su3vg018/

.contactForm {
 text-align:center;
}

Answer 3

将此添加到您的css文件中：

.contactForm label[for="contactButton"] {
    display: block;
    text-align: center;
}

问题是将提交按钮置于包装中心

3 个答案: