Como centralizar o formulário na página sem diminuir as margens da página?
Como centralizar o formulário na página sem diminuir as margens da página?
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!!!
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