Align horizontally a form

Question

Good morning everyone, I have some problem in aligning this form (Contact us) in the middle of the page. I utilise (I hope so) the flex propriety in a correct way, but why this form isn’t aligning?

So my question for you is:

Could you help me understand why this form isn’t aligning correctly?
Also could you suggest a way to align items horizontally and vertically in a proper way because I think my method isn’t correct.

Thanks in advance.

Here the code preview in codepen.io: https://codepen.io/maximo890/pen/oopdaz

CSS

.contact-us-form {
background-color: #f8bc3a;

}

.form-container {


}

form {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
    width: 30%;
}
.formgeneric {

    margin-top: 10px;

}

HTML

<section class="contact-us-form">
                        <div class="text-box-3">
                        <h2>CONTACT US</h2>
                        <p>Donec sed odio dui nulla vilae eli libem</p>
                        </div> 
                            <div class="form-container">
                                <form>
                                <input type="text" name="fname" value="name" id="iname" class="formgeneric">
                                <input type="text" name="email" value="email" id="imail" class="formgeneric">
                                <textarea type="text" name="message" id="imessage" class="formgeneric">Message</textarea>
                                <input id="button" type="submit" value="submit" class="formgeneric">
                                </form>


                            </div>



        </section>

score 1 · Answer 1 · answered Nov 19 '17 at 09:41

1

Just try margin:auto. Remove the display:flex property and just use the css below. This will align the form horizontally center.

form {
    margin-top: 100px;
    width: 30%;
    margin: auto;
}

answered Nov 19 '17 at 09:41

Adharsh M

2,773
2
20
33

score 0 · Answer 2 · answered Nov 19 '17 at 09:44

Use this Styling for your "Form" Element (Not for Form Container)

  form { 
display: block; 
margin-left: auto;
margin-right: auto;
    }

and replace "textarea" Style with this one (Width to 100%) :

 textarea {
    border: solid white 15px;
    border-radius: 15px;
    color: grey;
    margin-top: 15px;
    height: 300px;
width: 100%;

}

It will align them to the Center! It's just because of the Left and Right margins! :-)

<3

score 0 · Answer 3 · answered Nov 19 '17 at 09:51

0

display:flex and flex-direction property is used for direction the container wants to stack the items. not for aligning them.

and
for your your center alignment simply wrap your FORM tag into CENTER tag.

answered Nov 19 '17 at 09:51

santoshe61

805
8
17

score 0 · Answer 4 · answered Nov 19 '17 at 09:55

If you want to go with the flex, you can use something like this:

You can change margin and padding accordingly. Also, you also will have to do necessary changes for textArea container.



     #iname {
        flex:1;
        background-image: url(/img/contact.png);
        background-repeat: no-repeat;
        background-position: right;
        margin:auto; 

    }

    #imail{
        flex:1;
        margin:auto; 
        background-image: url(/img/emailat.png);
        background-repeat: no-repeat;
        background-position: right;
    }

    #imessage {
        flex:1;
        margin:auto; 
        background-image: url(/img/write.png);
        background-repeat: no-repeat;
        background-position: right;
    }


    input {
        flex:1;
        margin:auto; 
        border: white solid 15px;
        border-radius: 10px;
        width: 100%;
        color: grey;
    }

    #button {
        margin:auto; 
        flex:1;
        border: #313131 solid 15px;
        background-color: #313131;
        color: white;
        width: 18%;
    }

    textarea {
        flex:1;
        margin:auto; 
        border: solid white 15px;
        border-radius: 15px;
        color: grey;
        margin-top: 15px;
        height: 300px;


}

Hope this helps!

Align horizontally a form

4 Answers4