html - 使用 css 将输入表单移动到 body 中心

Question

目前我有以下输出和代码:

CSS:

label{text-align:left;
       width:150px;
       display:block;
           float:left;
           clear:right;
       font-size:18;}

在表单中输入:

<form>
<label>Name:</label><input name=name autocomplete=off><br>
<label>Date of Birth:</label><input size=2 name=dd placeholder=dd> / <input size=2 name=mm placeholder=mm> / <input size=6 name=yyyy placeholder=yyyy><br>
<label>Time of Birth:</label><input name=tob placeholder="hh : mm : ss"><br>
<label>City:</label><input name=city><br>
</form>

屏幕输出:

现在我想将所有移动到 body 中心，因此如果我使用 <center> <input> 的标签然后我得到以下输出(因为 CSS 不正确):

那么，我该怎么做才能移动<label> (CSS)+ <input> (形式)元素到 body 的中心？

Answer 1

您想设置父元素的宽度并将 margin: 0 auto; 应用到该父元素，在这种情况下您可以应用到您的 form 本身。这是一个 jsFiddle .

---

form {
  width: 50%;
  margin: 0 auto;
}

label {
  text-align:left;
  width:150px;
  display:block;
  float:left;
  clear:right;
  font-size:18;
}

<form>
    <label>Name:</label><input name=name autocomplete=off><br>
    <label>Date of Birth:</label><input size=2 name=dd placeholder=dd> / <input size=2 name=mm placeholder=mm> / <input size=6 name=yyyy placeholder=yyyy><br>
    <label>Time of Birth:</label><input name=tob placeholder="hh : mm : ss"><br>
    <label>City:</label><input name=city><br>
</form>