Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Versao Mobile: Problema para centralizar tabela e botao Enviar

Ola! Estou com dificuldade para centralizar a tabela e o botao de Enviar para a versao mobile do site da barbearia. Tentei com o text-align, mas nao esta dando certo. Se coloco o text-align para o

, ai centraliza tudo do formulario, inclusive o botao de enviar. Mas nao eh o que quero. Prefiro centralizar apenas o botao Enviar. Pensei em colocar um
para o botao, mas fiquei imaginando se nao tem um jeito pelo CSS sem mexer no HTML. Pode me ajudar?
<main>
            <form>
                <label for="nomesobrenome">Nome e Sobrenome</label>
                <input type="text" id="nomesobrenome" class="inputpadrao" required>
                <label for="email">Email</label>
                <input type="email" id="email" class="inputpadrao" required placeholder="seuemail@dominio.com">
                <label for="telefone">Telefone</label>
                <input type="tel" id="telefone" class="inputpadrao" required placeholder="(XX) XXXXX-XXXX">

                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" cols="70" rows="10" class="inputpadrao"></textarea>

                <fieldset>
                    <legend>Como gostaria de ser contatado?</legend>
                    <label for="radio-email"><input type="radio" id="radio-email" name="contato">Email</label>
                    <label for="radio-telefone"><input type="radio" id="radio-telefone" name="contato">Telefone</label>
                    <label for="radio-whatsapp"><input type="radio" id="radio-whatsapp" name="contato" checked>WhatsApp</label>
                </fieldset>
                <fieldset>
                    <legend>Qual horario voce prefere ser atendido?</legend>
                    <select>
                        <option>Manha</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>
                <label><input type="checkbox" class="checkbox" checked>Gostaria de receber nossas novidades por email?</label>
                <input type="submit" value="Send Form" class="enviar">    
            </form>
            <table>
                <thead>
                    <tr>
                        <th colspan="2">Dia/Horario</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>08 ~ 18h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>08 ~ 18h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>08 ~ 18h</td>
                    </tr>
                </tbody>
            </table>
        </main>

-------------------- CSS ----------------------------------



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

.enviar:hover{
    background: #F33A9B;
    transform: scale(1.1);
}

table{
    margin: 20px 0 40px;
}

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

td, th{
    border: 1px solid black;
    padding: 8px 15px;
}

/*CSS Rodape*/

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright{
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 20px;
}

@media screen and (max-width: 480px){
    .caixa, .principal, .mapaConteudo, .conteudoBeneficios, .video, .produtos, .produtos li{
        width: auto;
    }

    h1{
        text-align: center;
    }

    nav{
        position: static;
    }

    .listaBeneficios, .imagemBeneficios{
        width: 100%;
    }

    .produtos li{
        margin: 1.5% 1.5%;
    }

    form{
        margin: 40px 10px;
    }

    .inputpadrao{
        width: 90%;
        text-align: center;
    }

    .enviar{
        text-align: center;
    }

    table {
        margin: 20px;
        text-align: center;
    }
1 resposta
solução!

A melhor forma de centralizar elementos com css é com esse trecho de código:

position: relative; left: 50%; transform: translate(-50%);

Fazer o position do elemento relativo. Posicionar ele a 50% em relação ao elemento pai. E usar transform: translate(-50%); para compesar com metade da largura do elemento.

Coloque isso na classe .enviar, acredito que isso funcionará

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