目前我已经关注输出和代码:
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>
屏幕输出:
现在我想将所有内容移动到正文中心,因此如果我使用<center>
标记<input>
,那么我会得到以下输出(因为CSS不正确):
那么,我该怎样做才能将<label>
(CSS)+ <input>
(表格)元素移至Body的中心?
答案 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>
名称:
出生日期:/ /
出生时间:
城市:
`