将页面上的联系表单与并排文本和输入字段居中对齐？ [更新]答案

【问题标题】：Center align a contact form on page with side by side text and input fields? [UPDATED]将页面上的联系表单与并排文本和输入字段居中对齐？ [更新]
【发布时间】：2021-06-27 17:18:47
【问题描述】：

编辑：我已经更新了 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;
}

这就是我想要完成的：

任何帮助或建议都会非常感激和高度赞赏，我真的被这个吓傻了。我尝试对表格使用一些居中方法，但都不起作用。

【问题讨论】：

标签： html forms alignment

【解决方案1】：

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>

【讨论】：

效果很好，非常感谢！！！我肯定会留出一些时间来研究这段代码，这样我就不会再遇到这个问题了。非常感谢您的帮助！

【解决方案2】：

为了使事物居中，请尝试：

margin: auto; 
justify-content: center;
text-align: center

这应该对齐页面中的所有内容以及文本也与边距相等。

第二个选项：

margin: auto;
width: 80%

这将只占用父元素总宽度的 80%，如果这也不起作用，则会自动居中，然后从第二个选项中删除 margin: auto。

【讨论】：

【解决方案3】：

要居中对齐，给要对齐的元素一个“居中”类，然后在 CSS 中选择该类。一个例子是：

.center {
  text-align: center;
}

<div>
  Email: <input type="text" name="Email" size="40" class="center"/>
  <br/>
</div>

编辑：W3 Schools 是我找到答案的地方。

【讨论】：

谢谢，但这不是我要找的，而是我自己的。我造成了一些混乱，并编辑了我的帖子以使其尽可能清晰。