Question

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

所以我的问题是：

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

提前致谢。

这里是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>

Answer 1

试试margin:auto。删除display:flex属性，然后使用下面的CSS。这将使表格水平对齐。

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

Answer 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%;

}

它会将它们与中心对齐！这只是因为左边和右边缘！： - ）

＆lt; 3

Answer 3

显示：flex和flex-direction属性用于指示方向容器想要堆叠项目。不是为了对齐它们。

和
用于您的中心对齐，只需将FORM标记包装到CENTER标记中即可。

Answer 4

如果您想使用flex，可以使用以下内容：

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



     #iname {
        flex:1;
        background-image: url(/img/contact.png);
        background-repeat: no-repeat;
        background-position: right;
        margin:auto; 

    }

    #imail{
        flex:1;
        margin:auto; 
        background-image: url(/img/emailat.png);
        background-repeat: no-repeat;
        background-position: right;
    }

    #imessage {
        flex:1;
        margin:auto; 
        background-image: url(/img/write.png);
        background-repeat: no-repeat;
        background-position: right;
    }


    input {
        flex:1;
        margin:auto; 
        border: white solid 15px;
        border-radius: 10px;
        width: 100%;
        color: grey;
    }

    #button {
        margin:auto; 
        flex:1;
        border: #313131 solid 15px;
        background-color: #313131;
        color: white;
        width: 18%;
    }

    textarea {
        flex:1;
        margin:auto; 
        border: solid white 15px;
        border-radius: 15px;
        color: grey;
        margin-top: 15px;
        height: 300px;


}

希望这有帮助！

水平对齐表单

4 个答案: