如何在HTMLCSS中使<表单>居中？

问题描述 投票：-1回答：1

我已经尝试将我的联系表单居中放置了几个小时，但是它不会从页面的左边移动。我在另一个项目上做了一个和这个类似的表单，几乎使用了相同的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>
html css forms css-position centering
1个回答
-1
投票

你可以使用 <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>
0
投票

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

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.