Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Centralizar formulário

Como centralizar o formulário na página sem diminuir as margens da página?

5 respostas

Oi, Ana, tudo bem?

Já tentou utilizar o margin: 0 auto;? É um forma de centralizar conteúdos sem precisar mexer no espaçamento. Testa e me fala se deu certo :}

Já tentei sim, mas não acontece nada. Segue o código para ajudar...

HTML
<section class="formulario">
            <h2 class="subtitulo-claro">Envie uma mensagem para nós</h2>
                <form>
                    <label for="nomesobrenome">Nome e Sobrenome</label>
                    <input type="text" id="nomesobrenome" class="input-padrao" required placeholder="Nome Completo">
                    <label for="email">E-mail</label>
                    <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">
                    <label for="telefone">Telefone</label>
                    <input type="tel" id="telefone" class="input-padrao" required placeholder="(99) 99999-9999">
                    <label for="mensagem">Mensagem</label>
                    <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required placeholder="Escreva seu texto aqui"></textarea>
                    <input type="submit" value="Enviar" class="enviar">
                </form>
            </section>
CSS
.formulario {
    background: linear-gradient(#FFE4E1,#DB7093);
}
form label {
    display:block;
    font-size: 20px;
    margin: 20px 0 10px;
    font-family: 'Gotu', sans-serif;
    font-weight: bold;
}
.input-padrao {
    display: block;
    margin: 0 0 20px;
    width: 50%;
    padding: 10px;

}
.enviar {
    width:10%;
    padding: 15px 0;
    background: #FF1493;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    margin: 0 auto;

Oi, Ana.

Como você não colocou o código inteiro, o sua tag main está como? Eu utilizei a base do código do instrutor, e centralizei dessa forma:

main {
    text-align: center;
    width: 100%;
    margin: 0px 0;
}

form {
    display: inline-block;
    width: 300px;
}

form label {
    display:block;
    font-size: 20px;
}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 100%;
}

Como a sua tag main não está aqui, você adapta as estilizações acima no seu código, irá centralizar :} Qualquer dúvida é só falar!

Bons estudos!

Oi Laís, obrigada pela atenção, mas eu não estou conseguindo incluir o código inteiro aqui. Não sei se é problema no site ou no Fórum, mas não estou conseguindo incluir os códigos nos fóruns que criei, a última vez que consegui foi nessa tela anterior!!!

solução!

Eu consegui centralizar o formulário inserindo o 'main' conforme sua orientação, inserir também a sua formatação de 'form' e na classe 'input-padrao' eu coloquei 'margin: 0 auto'. Obrigada