Align form elements to the center?

Asked

Viewed 364 times

2

How can I center input/textareas (but I want the label to stay on the left)?

inserir a descrição da imagem aqui

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 form

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.

Everything together will be 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>

Browser other questions tagged html css form

You are not signed in. Login or sign up in order to post.