-3

Estou começando agora com JS, criei uma div e queria que o texto dentro dela ficasse sempre ao centro da caixa. Como posso fazer isso?

Oque eu tenho até agora :

div#CaixaPrincipal{
            
            background: white;
            width: 600px;
            height: 300px;
            margin : 0 auto 0 auto;
            align-items : center;
            font : normal 15pt Arial;
            
        }

5
  • Na verdade a linha "align-items" não existe, eu estava testando para ver se alinhava mas não funcionou :/ 3/03/2020 às 16:59
  • Isso não é JavaScript, é CSS.
    – Meu ovo
    3/03/2020 às 16:59
  • Mas esse código é CSS amigo, e não JS rs' 3/03/2020 às 17:01
  • Apenas adicione display: flex; e justify-content: center;. Isso já resolve.
    – Meu ovo
    3/03/2020 às 17:14
  • Sem ver seu HTML não da para te responder, o mais provável é que vc está usando a propriedade errada, já que seu container não tem flex, um simples text-align: center; deve resolver
    – hugocsl
    3/03/2020 às 17:27

1 Resposta 1

0

Você estava certo em utilizar o align-items: center, porém para utilizá-lo você precisa do display: flex; também! Então basta fazer o seguinte:

div {
     display: flex;
     align-items: center;
     justify-content: center;
}

Isso irá centralizar todo o conteúdo da página.

Caso queira manter a distribuição padrão do HTML, você pode direcionar para listar o código por colunas:

div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

Se quiser saber mais sobre o flexbox vou deixar esse link em PT que fala mais sobre o assunto: https://origamid.com/projetos/flexbox-guia-completo/

Espero que tenha ajudado, abraços!

3
  • Isso centraliza apenas horizontalmente. Como ele diz claramente na pergunta que quer ao centro, teria que centralizar verticalmente também.
    – Meu ovo
    3/03/2020 às 17:08
  • Votei negativo pq a sua resposta não ajuda muito. Só centraliza horizontalmente. E por que usar flex-direction: column;? Se melhorar a resposta eu mudo o voto.
    – Meu ovo
    3/03/2020 às 17:13
  • @Sam perdão pelo equivoco, já alterei a resposta. 3/03/2020 às 17:14

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .