如何在 HTML/CSS 中将 <form> 居中？答案

【问题标题】：How do I center a <form> in HTML/CSS?如何在 HTML/CSS 中将 <form> 居中？
【发布时间】：2020-08-20 19:51:21
【问题描述】：

几个小时以来，我一直在尝试将我的联系表单居中，但它不会从页面左侧移动。我在另一个项目中制作了一个与此类似的表单，并且几乎使用了相同的 CSS，只是字体和颜色略有变化，所以我不确定为什么这不起作用。大家可以看看，让我知道我做错了什么吗？谢谢

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>

【问题讨论】：

它对我有用。
这很奇怪。我将尝试将其与其余代码分开并在我这边再试一次。
对我来说仍然无法在 FF 和 IE 上工作，您是否在我提供的代码中添加了任何内容，或者您是否按原样运行它？我唯一遗漏的部分是字体大小、字体颜色和背景颜色。

标签： html css forms css-position centering

【解决方案1】：

我想这就是你想要的。表格与中心对齐。

.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>

【讨论】：

【解决方案2】：

您可以使用<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>

【讨论】：