Entrar Ainda não tem acesso?
5
respostas

centralizar o video

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Ley
| 175k xp | 208 posts

Olá!

Eu diminuí a largura do vídeo de 100% para 90%. Entretanto, mesmo com a propriedade "width" tendo o valor "auto", o vídeo fica colado na parte esquerda e com espaçamento no lado direito.

Alguém sabe como eu conseguiria centralizar o vídeo? 

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

    h1{
        text-align: center;
    }

    nav{
        position: static;
        text-align: center;
    }

    .lista-beneficios, .imagem-beneficios{
        width: 100%;
    }
}
5 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Ley, tudo bem?

Aparentemente era para funcionar certinho. Você verificou se as classses foram chamadas corretamente? Se preferir, compartilha aqui o html em fica o vídeo para testar e o css completo da página.

por Ley
| 175k xp | 208 posts

Oi, Laís. Tudo bem?

Não sei mexer no github pra compartilhar link de projetos. Sabe se tem algum video no alura ensinando como usar o github?

por Simao Pedro Oliveira
| 126.8k xp | 15 posts

Tente:

.video{ margin: 0 auto; }

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Ley, tudo bem?

Nós temos um curso de Git e Github https://www.alura.com.br/curso-online-git-github-controle-de-versao que é muito interessante e importante de fazer. Mas você pode colocar aqui o seu código, mesmo que seja grande. Ou uma alternativa também é colocar os arquivos no Google drive, compartilhar eles, postar o link aqui, eu baixo e testo o projeto. O que for mais confortável para você :}

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Ley, tudo bem? Podemos centralizar elementos de N jeitos com CSS, nesse momento eu recomendaria você definir uma largura para o video:

video {
    width: 500px;
}

E depois aplicar um margin nele:

video {
    margin: 0 auto;
    width: 500px;
}

O margin: 0 auto; somente vai funcionar caso seu video tenha um width definido para ele.

Isso deve resolver seu problema.

Espero ter ajudado.