Как центрировать <form>в HTML / CSS? - PullRequest
Новая
       27

Как центрировать <form>в HTML / CSS?

0 голосов
/ 06 мая 2020

Я уже пару часов пытаюсь центрировать свою контактную форму, но она не перемещается из левой части страницы. Я создал форму, похожую на эту, в другом проекте и в значительной степени использовал тот же 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>

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Думаю, это то, что вы хотите. Форма выравнивается по центру. 

.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>
0 голосов
/ 06 мая 2020

Вы можете использовать тег <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>
...