时间戳

首页 > 解决方案 > 在 div 中将表单居中

html - 在 div 中将表单居中

问题描述

我正在尝试将我的表单集中在 Div“fromArea”中。但是当我使用“display:flex”、“align-content:center”时什么也没有发生。但是，当我在表单上使用“margin-left: 60px”时，我得到了中间的内容。

我试过：“display：flex”，“align-content：center”

html:

<!-- CONTENT -->
    <div class="container">

        <div class=formArea>

            <form>
                <h1>Contact us!</h1>
                <input type="text" id=firstName placeholder="First name"><br>
                <input type="text" id=lastName placeholder="Last name"><br>
                <input type="text" id=City placeholder="City"><br>
                <input type="email" id=email placeholder="Email"><br>
                <input type="phone" id=phone placeholder="Phone"><br>
                <textarea name="yourMessage" id="yourMessage" cols="" rows="" style="text-align:left; overflow:auto;"
                    placeholder="Your message"></textarea>
                <input type="submit" id=submit><br>
            </form>
        </div>

    </div>

CSS：

.formArea {
    width: 100%;
    padding-bottom: 590px;
    margin: 0 30%;
    background-color:rgba(0, 0, 0, 0.30);
    border-right: 2px solid rgba(0, 193, 177, .3);
    border-left: 2px solid rgba(0, 193, 177, .3);
    position: relative;
}

form {
    width: 75%;
    padding: 0px;
    position: absolute;
    left: 0%;
    top: 0;
    margin: 15px;
    margin-left: 60px;
}

我想在不使用“margin-left：60px;”的情况下将表单放在 .formArea 中 正如您在我的 Css 脚本（表单）中看到的那样。

标签： htmlcss

解决方案

尝试这个：

.formArea {
text-align: center;
}

推荐阅读