将带有css的输入表单移动到正文中心

时间:2015-02-06 14:40:31

标签: html css

目前我已经关注输出和代码:

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>

屏幕输出:

screen

现在我想将所有内容移动到正文中心,因此如果我使用<center>标记<input>,那么我会得到以下输出(因为CSS不正确):

screen2

那么,我该怎样做才能将<label>(CSS)+ <input>(表格)元素移至Body的中心

2 个答案:

答案 0 :(得分:2)

您想要设置父元素的宽度并将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>

答案 1 :(得分:-1)

在代码之前使用Div

	label{text-align:left;
       width:150px;
       display:block;
           float:left;
           clear:right;
       font-size:18;}
       .outer
       {
       	width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
       }
<div class="outer">
	<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>

</div>

    名称:
出生日期:/ /
出生时间:
城市:

`