1
resposta

Dúvida na página do formulário

Estou testando o código para explorar mais o CSS, gostaria de centralizar todo o formulário. O professor pedro adicionou no CSS a tag main com as propriedades width:940px e margin: 0 auto, isso não deveria centralizar o conteúdo? (apaguei conteúdos desnecessários para não passar das 5000 caracteres).

CÓDIGO HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main>

        <form>
            <label for="nomecompleto">Nome Completo<input type="text" id="nomecompleto" class="input-padrao" required></label>


            <label for="email">Email <input type="text" id="email" class="input-padrao" required"></label>


            <label for="telefone">Telefone <input type="tel" id="telefone" class="input-padrao""></label>


            <label >Mensagem <textarea cols="70" rows="10" required></textarea></label>


                <fieldset>

                    <legend>Como prefere o nosso contato?</legend>

                    <label><input type="radio" name="contato" value="email"> Email</label>

                    <label> <input type="radio" name="contato" value="telefone">Telefone</label>

                    <label> <input type="radio" name="contato" value="whatsapp" " checked>whatsapp</label>

                </fieldset>

                <fieldset>
                    <legend>Qual horário deseja ser atendido?</legend>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

                <label class="checkbox"> <input type="checkbox" value="pergunta" checked> Gostaria de receber nossas novidades por email?</label>


            <input type="submit"  name="contato" value="Enviar Formulário" class="submit">

        </form>

        <table>
            <thead>
                <tr>
                    <th>Dia</th>
                    <th>Horário</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Segunda</td>
                    <td>8h-20h</td>
                </tr>
                <tr>
                    <td>Quarta</td>
                    <td>8h-20h</td>
                </tr>
                <tr>
                    <td>Sexta</td>
                    <td>8h-20h</td>
                </tr>
            </tbody>

        </table>

    </main>

</body>
</html>

CSS:

header {
    background: #724c4c;
    padding: 20px 0;   
}

.caixa {

    position: relative;
    width: 940px;
    margin: 0 auto;

}

nav {

    position: absolute;
    top: 110px;

}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {

    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: aliceblue;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 100px;

}

.produtos li {

    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
   padding: 30px 20px;
    box-sizing: border-box;
    border: solid 2px black;    
    border-radius: 10px;

}

.produtos li:hover {

    border-color: #724c4c;
}

.produtos li:active {
    border-color: aqua;
}

.produtos li:hover h2 {
    font-size: 30px;
}


.produtos h2 {
    font-weight: bold;
    font-size: 25px;

}

.produto-descricao {
    font-size: 18px;

}

.produto-preco {
    font-weight: bold;
    font-size: 20px;
    margin: 20px 0 0 0;
    margin-top: 20px;

}

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label, legend {
    display: block;
    font-size: 20px;
    margin: 0 0 20px;

}

.input-padrao, form textarea {
    display: block;
    margin: 10px 0 15px;
    padding: 10px;
    width: 50%;
}

.checkbox {
    margin: 40px 0;
}

div p {
    font-size: 20px;
    margin: 15px 0;

}

.submit {
    width: 40%;
    padding: 15px 0;
    background: orange;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 20px;
    transition: 2s;
    cursor: pointer ;

}

.submit:hover {
    background: darkorange;
    transform: scale(1.2);
}

table {
    margin: 20px 0 40px 100px;
}

thead{
    background: #555555;
    font-weight: bold;
    color: white;
}

td, th {
    border: solid 2px #000000;
    padding: 8px 15px;
}
1 resposta

Olá, Alexandre.

Tudo bem?

Sim. As propriedades width:940px e margin: 0 auto deveriam centralizar o formulário, no caso eu copiei os seu códigos HTML e CSS e centralizou aqui pra mim, funcionou certinho, agora não sei o motivo de não ter centralizado ai pra você.

Qualquer coisa manda um print da tela do navegador.

Testa em outro navegador se tiver algum outro instalado ai.

Valeu Alexandre.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software