我想调整屏幕中间的复选框。
我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
由于文本长度不同，复选框位于不同的位置。 将它们调整为垂直线大致到最长文本（“check3”）复选框位置的最佳方法是什么？
我很抱歉这个简单的问题。
答案 0 :(得分：2)
您可以将其更改为我认为可以满足您的需求：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________
</div>
<br>
<input name="Submit1" type="submit" value="submit">
</form>
</body>
</html>
这样您无需事先知道文本的宽度。
答案 1 :(得分：0)
您可以使用简单的方法，例如将width设置为您的表单，然后像这样设置margin: 0 auto：
<form method="get">
<input name="check1" type="checkbox" />short text<br>
<input name="check2" type="checkbox" />medium-length text__________<br>
<input name="check3" type="checkbox" />long text________________________________<br>
<input name="Submit1" type="submit" value="submit" />
</form>
form { display: block; margin: 0 auto; width: 400px; }
如果您不想设置宽度，可以将display的{{1}}设置为form并获得相同的结果，但使用table宽度：
HTML - ＆gt;相同的
auto
<小时/>的！OR！ <小时/>
如果您希望 完全 居中，水平和垂直，您可以使用以下变体：
form { display: table; margin: 0 auto; }
<table>
<tbody>
<tr>
<td>
<form method="get">
<input name="check1" type="checkbox" />short text<br />
<input name="check2" type="checkbox" />medium-length text__________<br />
<input name="check3" type="checkbox" />long text________________________________<br />
<input name="Submit1" type="submit" value="submit" />
</form>
</td>
</tr>
</tbody>
</table>
答案 2 :(得分：0)
使用div标签然后你可以使用margin属性并删除 style =“text-align：center ” 表格形式标签
#checkbox {
float:left
margin-left:70px;
}
<div id="checkbox">
<form method="get" >
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</div>