Align elements of a form to the center?

Question

Align elements of a form to the center?

Navigation

#1 by (1 votes)

2

How can I put the inputs / textareas in the center (but do I want the label to continue on the left)?

form {
    width: 700px;
    color: red;
}
form textarea,input {
    display: block;
    margin: 0 0 30px 0;
}

<form>
    <input type="submit" name="publicar"/>
    <input type="text" name="title" id="title" placeholder="Título"/>
    <label for="info">Seu Texto</label>
    <textarea id="info"></textarea>
</form>

html css

asked by anonymous 12.09.2015 / 23:14

1 answer

Question about animate with jQuery Query with INNER JOIN and choose loop reference

score 1 · Answer 1

You can do this by creating a class, for example - alinhamentoCentro (or whatever you want to call it) and give it the following styles: .alinhamentoCentro {margin: 15px auto;} . Then just apply this class to each element you want to be aligned to the center.

All together will look something like:

form {
    width: 700px;
    color: red;
}
form textarea,input {
    display: block;
    margin: 0 0 30px 0;
}
.alinhamentoCentro {margin: 15px auto;}

<form>
    <input class="alinhamentoCentro" type="submit" name="publicar"/>
    <input class="alinhamentoCentro"type="text" name="title" id="title" placeholder="Título"/>
    <label for="info">Seu Texto</label>
    <textarea id="info" class="alinhamentoCentro"></textarea>
</form>