Entrar Ainda não tem acesso?
3
respostas

Consigo centralizar o campo ''Select" na versão mobile?

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Gustavo Machado de Oliveira
| 26.7k xp | 3 posts
Diretor de Arte

Tentei buscar em outras dúvidas e até mesmo em outras soluções para diversos 'campos', porém para o select (manha/tarde/noite) eu não consegui uma solução.

imagem de formulário com vários campos em sua maioria alinhados verticalmente

o meu código está assim (deixei o select em branco):

@media screen and (max-width: 480px){
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos {
        width: auto;
    }

    h1 {
        text-align: center;    
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }

    .produtos li {
        display: block;
        width: auto;
        margin: 2% 1.5em;
    }

    form {
           margin: 3em 2em;
    }

    form label, form legend {
        display: block;
        font-size: 18px;
        margin: 0 0 10px;
        text-align: center;
    }

    .input-padrao {
        width: 80%;
        text-align: center;
    }

    select {

    }

    table {
        margin: 20px 80px;
    }

    .enviar {
        margin: 20px 80px;
        font-size: 14px;
    }
 }

obs.: avaliando bem, nem o 'enviar' está centralizado como eu gostaria. Me sentindo ainda leigo, arrisquei 'vertical-align:center' mas não surtiu efeito. Podem me ajudar nessas duas questões?

3 respostas
por Cândido Luiz Lucas De França
| 22.6k xp | 33 posts

Gustavo, tenta utilizar o margin: auto para centralizar o select e o botão de enviar:

select{
    margin: auto;
}
.enviar {
    margin: 20px auto;
    font-size: 14px;
}

Esse margin auto fará o select criar margens com a mesma largura na horizontal, de forma que preencha toda a linha junto com o item

por Gustavo Machado de Oliveira
| 26.7k xp | 3 posts
Diretor de Arte

Olá Cândido, Nessa sua sugestão, acabou alinhado à esquerda.Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O que me deixa incomodado é o alinhamento, to colocando um png pra explicar essa questão. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Cândido Luiz Lucas De França
| 22.6k xp | 33 posts

Gustavo, encontrei essa sugestão aqui: https://www.linhadecomando.com/css/css-centralizando-um-botao-no-formulario, que pode lhe ajudar.

O intuito do 'margin: auto' seria realmente esse, de fazer com que o comprimento de X seja igual ao de Y (no seu exemplo). Abaixo, seria um ajuste na minha sugestão anterior:

select{
    display: block;
    margin: auto;
}
.enviar {
    display: block;
    margin: 20px auto;
    font-size: 14px;
}