水平对齐表格[重复]答案

【问题标题】：Align horizontally a form [duplicate]水平对齐表格[重复]
【发布时间】：2017-11-19 22:11:13
【问题描述】：

大家早上好，我在页面中间对齐此表单（联系我们）时遇到了一些问题。我以正确的方式使用（我希望如此）弹性属性，但为什么这个表单没有对齐？

所以我的问题是：

您能帮我理解为什么这个表格没有正确对齐吗？
您能否建议一种以适当方式水平和垂直对齐项目的方法，因为我认为我的方法不正确。

提前致谢。

这里是codepen.io中的代码预览：https://codepen.io/maximo890/pen/oopdaz

CSS

.contact-us-form {
background-color: #f8bc3a;

}

.form-container {


}

form {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
    width: 30%;
}
.formgeneric {

    margin-top: 10px;

}

HTML

<section class="contact-us-form">
                        <div class="text-box-3">
                        <h2>CONTACT US</h2>
                        <p>Donec sed odio dui nulla vilae eli libem</p>
                        </div> 
                            <div class="form-container">
                                <form>
                                <input type="text" name="fname" value="name" id="iname" class="formgeneric">
                                <input type="text" name="email" value="email" id="imail" class="formgeneric">
                                <textarea type="text" name="message" id="imessage" class="formgeneric">Message</textarea>
                                <input id="button" type="submit" value="submit" class="formgeneric">
                                </form>


                            </div>



        </section>

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

试试margin:auto。删除 display:flex 属性并使用下面的 css。这将使表单水平居中对齐。

form {
    margin-top: 100px;
    width: 30%;
    margin: auto;
}

【讨论】：

【解决方案2】：

将此样式用于“表单”元素（不适用于表单容器）

  form { 
display: block; 
margin-left: auto;
margin-right: auto;
    }

并用这个替换“textarea”样式（宽度为100％）：

 textarea {
    border: solid white 15px;
    border-radius: 15px;
    color: grey;
    margin-top: 15px;
    height: 300px;
width: 100%;

}

它会将它们与中心对齐！只是因为左边距和右边距！ :-)

【讨论】：

【解决方案3】：

display:flex 和 flex-direction 属性用于方向容器想要堆叠物品。不是为了对齐它们。

和
为了您的中心对齐，只需将您的 FORM 标签包装到 CENTER 标签中。

【讨论】：

【解决方案4】：

如果你想使用 flex，你可以使用这样的东西：

您可以相应地更改边距和填充。此外，您还必须对 textArea 容器进行必要的更改。

＃我的名字 { 弹性：1；背景图片：网址（/img/contact.png）；背景重复：不重复；背景位置：右；边距：自动； } #邮件{ 弹性：1；边距：自动；背景图片：网址（/img/emailat.png）；背景重复：不重复；背景位置：右； } #消息{ 弹性：1；边距：自动；背景图像：url（/img/write.png）；背景重复：不重复；背景位置：右； } 输入 { 弹性：1；边距：自动；边框：白色实心15px；边框半径：10px；宽度：100%；颜色：灰色； } ＃按钮 { 边距：自动；弹性：1；边框：#313131 实心 15px；背景颜色：#313131；白颜色; 宽度：18%； } 文本区域 { 弹性：1；边距：自动；边框：纯白15px；边框半径：15px；颜色：灰色；边距顶部：15px；高度：300px； }

希望这会有所帮助！

【讨论】：