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?