Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Centralizando uma DIV; desafio Alura

Referente ao curso Praticando CSS: Grid e Flexbox, no capítulo Hello Flex! e atividade Desafio: centralizando uma div

por Maria Eduarda Santos Pereira de Barros
| 34.8k xp | 49 posts
Vendedora

Boa noite, tudo bem? Este foi o resultado final para centralizar uma DIV através do seu elemento pai (MAIN);

CSS:

main {
   height: 100vh;
   width: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

div {
   width: 240px;
   height: 110px;
   font-size: 36px;
   font-weight: bold;
   background-color: #fff;
   border-radius: 4px;
   padding: 0 10px;
   background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
   box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
   -4px -4px 6px 0 rgba(116, 125, 136, .2),
   inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
   inset 4px 4px 6px 0 rgba(0, 0, 0, .2);;
}
1 resposta
solução!
por Victor Costa Santos
| 1841.6k xp | 3524 posts
Alura Scuba Team Monitor de ForumOps

Oi Maria! Tudo bem?

Muito bem, seu código está excelente, fico muito feliz por está se desafiando e evoluindo na sua aprendizagem.

Apenas uma observação em seu código, é que você utilizou 100vh para a altura e também para a largura, o ideal para ocupar 100% da largura seria width: 100vw;

main {
   height: 100vh; /* Altura total da viewport */
   width: 100vw;  /* Largura total da viewport */
   display: flex;
   justify-content: center; 
   align-items: center;     
}

Meus parabéns novamente, e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!