0 Compartilhamentos 70 Views

Como centralizar no CSS de forma definitiva

12 de setembro de 2020

Conseguir alinhar o conteúdo de uma área tanto verticalmente quanto horizontalmente em uma página da web é considerado um Cálice Sagrado do webdesign há décadas. Muitas tabelas já foram sacrificadas nessa busca, assim como muitas linhas de CSS já foram consumidas, às vezes com resultados insatisfatórios.

Desde que o modelo de Flexbox foi introduzido no CSS3, entretanto, atingir esse objetivo se tornou muito fácil. Sim, é possível centralizar uma frase na horizontal e na vertical dentro de uma DIV usando apenas três linhas de código:

Aplique esses estilos ao conteúdo que se deseja centralizar e ele ficará perfeitamente alinhado, tanto no eixo de X, quanto no eixo de Y.

Isso é possível graças ao poder do Flexbox. De acordo com a Fundação Mozilla, “o Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento”.

No estágio atual, o Flexbox ainda é um candidato de padrão ao CSS no W3C, apresentado em 2018, mas não aprovado oficialmente pela entidade. Entretanto, apesar da lentidão da W3C, o modelo foi implementado com suporte completo ou parcial em 96% dos navegadores existentes no mercado e é uma solução mais do que bem vinda para problemas de layout.

Carregando...

Você pode se interessar

Como usar a internet de forma segura com os novos DNS da Cloudflare
Dicas
5 visualizações
Dicas
5 visualizações

Como usar a internet de forma segura com os novos DNS da Cloudflare

Carlos L. A. da Silva - 28 de novembro de 2020

Serviço oferece de forma gratuita duas opções reguladas para navegar de forma protegida.

Promoções de Jogos do Final de Semana (27/11) – Edição da Black Friday
Notícias
14 visualizações
Notícias
14 visualizações

Promoções de Jogos do Final de Semana (27/11) – Edição da Black Friday

Carlos L. A. da Silva - 27 de novembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Como a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
12 visualizações
Artigos
12 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020

Maxine é uma solução de aprendizado de máquina na nuvem que reduz a quantidade de dados transmitidos, deduzindo e gerando as partes que faltam.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (20/11)
Notícias
16 visualizações
16 visualizações

Promoções de Jogos do Final de Semana (20/11)

Carlos L. A. da Silva - 20 de novembro de 2020
Top 10 soft skills para desenvolvedores
Artigos
18 visualizações
18 visualizações

Top 10 soft skills para desenvolvedores

Carlos L. A. da Silva - 20 de novembro de 2020
Como detectar um bloqueador de anúncios usando uma linha de Javascript
Dicas
21 visualizações
21 visualizações
Promoções de Jogos do Final de Semana (13/11)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (13/11)

Carlos L. A. da Silva - 13 de novembro de 2020