如何解决将页面上的联系表单与并排文本和输入字段居中对齐？ [更新]
编辑：我已经更新了 CSS 和 html。我已经弄清楚了居中，但仍然无法对齐标签和字段。 我需要将输入字段和标签对齐到它们中心有一条完美线的位置，基本上将它们分开，因为标签堆叠在另一个顶部，输入字段堆叠在另一个顶部。 下面的代码已经类似于我想要的样子，除了表单位于左边缘并且我的标签和输入字段没有完全对齐。
这是我目前的表格：
<div style="text-align:center">
<form>
<div>
Name: <input type="text" name="Name" size="40"/>
<br/>
<br/>
</div>
<div>
Address: <input type="text" name="Address" size="50"/>
<br/>
<br/>
</div>
<div>
City: <input type="text" name="City" size="25"/>
<br/>
<br/>
</div>
<div>
State: <input type="text" name="State" size="25"/>
<br/>
<br/>
</div>
<div>
Zip: <input type="text" name="Zip" size="25"/>
<br/>
<br/>
</div>
<div>
Email: <input type="text" name="Email" size="40"/>
<br/>
<br/>
</div>
<div>
Subscribe to our mailing list?
<br/>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div>
Comments:<br/>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
<br/>
<br/>
<input type="submit" />
<input type="reset" />
</div>
</form>
</div>
到目前为止，我对这个表单唯一的 CSS 是：
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
这就是我想要完成的：
任何帮助或建议都会很棒，非常感谢，我真的对这个感到目瞪口呆。我尝试对表格使用一些居中方法，但都没有奏效。
解决方法
check this i just positioned it with css
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
position: relative;
bottom: 2px;
}
input{
position: relative;
margin-top: 10px;
}
.text{
display: flex;
justify-content: center;
}
.text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="text-align:center">
<form>
<div>
<label> Name:</label>
<input type="text" name="Name" size="40"/>
</div>
<div>
<label style="left:27px"> Address:</label>
<input type="text" name="Address" size="50" style="left:27px;"/>
</div>
<div>
<label style="right: 46px;">City: </label>
<input type="text" name="City" size="25" style="right:46px;"/>
</div>
<div>
<label style="right:48px">State:</label>
<input type="text" name="State" size="25"/ style="right: 49px;">
</div>
<div>
<label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
</div>
<div>
<label style="bottom: 0px;" > Email:</label>
<input type="text" name="Email" size="40"/>
</div>
<div style="right: 180px; position: relative;" >
<label>Subscribe to our mailing list?</label>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div class="text">
<br>
<br>
<label style="top: 60px; left: 70px;"> Comments: </label>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px; position: relative;"></textarea>
<br/>
<br/>
</div >
<div class="submit" style="right: 80px; position: relative;">
<input type="submit" width="" />
<input type="reset" />
</div >
</form>
</div>
<script src="test.js"></script>
</body>
</html>要使事物居中，请尝试：
margin: auto;
justify-content: center;
text-align: center
这应该对齐页面中的所有内容以及文本，并且边距相等。
第二个选项：
margin: auto;
width: 80%
这将只占用父元素总宽度的 80%，如果这也不起作用，它将自动居中，然后从第二个选项中删除 margin: auto。
,要居中对齐，给要对齐的元素一个“居中”类，然后在CSS中选择该类。一个例子是：
.center {
text-align: center;
}<div>
Email: <input type="text" name="Email" size="40" class="center"/>
<br/>
</div>编辑：W3 Schools 是我找到答案的地方。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。