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.