居中表格 - CSS

Question

我正在处理的表格有两个问题。问题一是我无法让表单在页面中居中。第二个问题是我的提交按钮不会在表单内居中。

fieldset {
  display: block;
  margin: 0 auto;
  border: 1px solid rgb(233, 69, 0);
  width: 40%;
}
legend {
  background-color: rgb(233, 69, 0);
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}
label {
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%;
}
input {
  display: block;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}
textarea {
  display: block;
  font-size: 0.9em;
  float: left;
  height: 150px;
  margin: 10px 0px;
  width: 600%;
}
form p {
  text-align: center;
}
input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
}
input:focus,
select:focus,
textarea:focus {
  background-color: rgb(220, 255, 220);
}
input:focus:valid {
  background-color: rgb(220, 255, 220) url("go.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}
input:focus:invalid {
  background-color: rgb(255, 232, 233) url("stop.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

<section>
  <p>Please type in your information so I can send you the newsletter.
    <br>Required values are marked by an asterisk (*)</p>
  <form id="newsletter" onsubmit="return validateForm()" method="post">
    <fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:
        <label>
          <textarea name="comments" id="comments" cols="55" rows="5"></textarea>
          <div class="button">
            <input type="submit" value="Sign Me Up" />
          </div>
    </fieldset>

</section>

Answer 1

您不能在字段集中指定两次边距：

margin: 0 auto;
border: 1px solid rgb(233, 69, 0);
margin: 10px 0px 10px 5%;   <--- Bad

字段集上应该有 margin: 0 auto;，并且字段集中的所有控件都应该属于 div 应用其他边距的地方。

编辑：这是对字段集下部的修改，以使其以预期方式运行：

<fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:</label>     
          <textarea name="comments" id="comments" style="float: left; margin: 0 auto; width: 50%" rows="5"></textarea>
          <div class="button" style="margin: 0 auto; width: 200px;display: block;">
            <input type="submit" value="Sign Me Up">
          </div>
</fieldset>

Answer 2

您不要在任何地方关闭最后两个 <label>。正确的代码是：

  <label for="comments">Additional Information:
    <label>
      <textarea name="comments" id="comments" cols="55" rows="5></textarea>
    </label>
  </label>

  <div class="button">
    <input type="submit" value="Sign Me Up" />
  </div>
</fieldset>

您需要编辑 css 以使按钮与 clear 保持在底部并使按钮居中：

.button {      /*     */
  clear: left; /* NEW */
}              /*     */

input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
  margin: 0 auto; /* NEW */
}

工作示例：https://jsfiddle.net/m0g9tzxz/1/embedded/result/

居中表格 - CSS

Centering a Form - CSS

html

css

centering