Search code examples
htmlcssformscss-positioncentering

How do I center a <form> in HTML/CSS?


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


Solution

  • You can use the <center> tag to horizontally align the content.

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