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;
}
