How to align all the elements of a form in the center? [duplicate]

-2

I'm trying to align the elements of a form in the center and leave the label tag on the left side of the fields, like this:

HTML:

<form><labelfor="info">Seu Texto</label>
                <textarea id="info"></textarea>

                <label for="cat">Seu Texto</label>

                <select class="selectpicker" id="cat">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

CSS:

form {
    width: 700px;
    color: red;
}
form label {
    color: blue;
    display: inline-block;
    background: black;
}
form textarea, input, select {
    display: block;
    border-radius: 2px;
    border: none;
    background: #DDDDDD;
    clear: both;
    margin-bottom: 20px;
}

form textarea {
    width: 625px;
    padding: 10px;
    height: 212px;
}
form select {
    width: 625px;
    padding: 10px 12px;
}

The form has is inside a div of 700px, its size is 700px. how do I align the (inputs, textareas, selects) elements and leave the labels in the upper left part?

    
asked by anonymous 13.09.2015 / 19:57

1 answer

0

Put in the fields you want to centralize:

margin: 0 auto;

Take a look at the example:
» JSFiddle

    
13.09.2015 / 20:31