我如何居中<form>在 HTML/CSS 中？</form>

Question

I've been trying to center my contact form for a couple of hours now, however it won't move from the left of the page.几个小时以来，我一直试图将我的联系表格居中，但它不会从页面左侧移动。 I made a form similar to this one on another project and pretty much used the same CSS with just slight alterations in font and color, so I'm not sure why this isn't working.我在另一个项目中制作了一个与此类似的表格，并且几乎使用了相同的 CSS，只是字体和颜色略有变化，所以我不确定为什么这不起作用。 Can y'all take a look and let me know what I'm doing wrong?大家可以看看，让我知道我做错了什么吗？ Thank you谢谢

CSS
.contact .container {
    display: block;
    text-align: center;
}
.contact form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.contact input:not([type=checkbox]),
.contact .checkbox-container,
.contact button {
    display: block;
    width: 30%;
    margin: 0 auto;
    margin-top: 1.3em;
    border-radius: 20px;
    height: 2em;
}

.contact input:not([type=checkbox]),
.contact button {
    display: block;
    width: 30%;
    margin: 0 auto;
    margin-top: 1.3em;
    border-radius: 20px;
    height: 2em;
    text-indent: 1.5em;
    background-color: rgb(170, 193, 221);
    border: 1px solid white;
}

.contact input[type=checkbox] {
    display: inline-block;
}

.contact input[type=checkbox]:checked {
    background-color: rgb(170, 193, 221);
}

.contact button {
    width: 10%
    text-indent: 0;
    color: white;
}

HTML

<body class="contact">
    <div class="container">
    <h1>What's Buzzin'?</h1>
    <p>Love bees? Are you a beekeeper? Have facts or images that you want on the site? Contact us!</p>
    <form action="#" method="#">
        <input type="text" placeholder="Name">
        <input type="email" placeholder="Email">
        <input type="message" placeholder="Message">
        <div class="checkbox-container">
        <input type="checkbox" id="newsletter" checked>
        <label for="newletter">Receive Bee Business!</label>
    </div>
        <button type="submit">Buzz!</button>
    </form>
</div>
</body>

Answer 1

I guess this is what you want.我想这就是你想要的。 The form is aligned to the centre.表格与中心对齐。

 .contact.container { display: block; text-align: center; }.contact form { display: inline-block; margin-left: auto; margin-right: auto; text-align: left; }.contact input:not([type=checkbox])，.contact.checkbox-container { background-color: #3CBC8D; color: white; }.contact input:not([type=checkbox]), .contact.checkbox-container { display: block; width: 180px; margin: 0 auto; margin-top: 1.3em; border-radius: 20px; height: 2em; }.contact button { display: block; width: 30%; margin: 0 auto; margin-top: 1.3em; border-radius: 20px; height: 2em; text-indent: 1.5em; background-color: rgb(170, 193, 221); border: 1px solid white; }.contact input[type=checkbox] { display: inline-block; }.contact input[type=checkbox]:checked { background-color: rgb(170, 193, 221); }.contact button { width: 10% text-indent: 0; color: white; }

 <body class="contact"> <div class="container"> <h1>What's Buzzin'?</h1> <p>Love bees? Are you a beekeeper? Have facts or images that you want on the site? Contact us!</p> <form action="#" method="#"> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="message" placeholder="Message"> <div class="checkbox-container"> <input type="checkbox" id="newsletter" checked> <label for="newletter">Receive Bee Business!</label> </div> <button type="submit">Buzz!</button> </form> </div> </body>

Answer 2

You can use the <center> tag to horizontally align the content.您可以使用<center>标签水平对齐内容。

 .contact.container { display: block; text-align: center; }.contact form { display: inline-block; margin-left: auto; margin-right: auto; text-align: left; }.contact input:not([type=checkbox]), .contact.checkbox-container, .contact button { display: block; width: 30%; margin: 0 auto; margin-top: 1.3em; border-radius: 20px; height: 2em; }.contact input:not([type=checkbox]), .contact button { display: block; width: 30%; margin: 0 auto; margin-top: 1.3em; border-radius: 20px; height: 2em; text-indent: 1.5em; background-color: rgb(170, 193, 221); border: 1px solid white; }.contact input[type=checkbox] { display: inline-block; }.contact input[type=checkbox]:checked { background-color: rgb(170, 193, 221); }.contact button { width: 10% text-indent: 0; color: white; }

 <body class="contact"> <div class="container"> <center> <h1>What's Buzzin'?</h1> <p>Love bees? Are you a beekeeper? Have facts or images that you want on the site? Contact us!</p> <form action="#" method="#"> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="message" placeholder="Message"> <div class="checkbox-container"> <input type="checkbox" id="newsletter" checked> <label for="newletter">Receive Bee Business!</label> </div> <button type="submit">Buzz!</button> </form> </center> </div> </body>

我如何居中<form>在 HTML/CSS 中？</form>

问题描述

2 个解决方案

解决方案1
0 2020-05-06 01:18:33

解决方案2
-1 已采纳

我如何居中<form>在 HTML/CSS 中？</form>

问题描述

2 个解决方案

解决方案1 0 2020-05-06 01:18:33

解决方案2 -1 已采纳

解决方案1
0 2020-05-06 01:18:33

解决方案2
-1 已采纳