0 Compartilhamentos 238 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

O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
50 visualizações
Artigos
50 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021

Federated Learning of Cohorts é uma API proposta pelo Google para substituir os cookies, mas ela também oferece problemas

Como planejar e construir um projeto de programação
Artigos
272 visualizações
Artigos
272 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
382 visualizações
Artigos
382 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

Deixe um Comentário

Your email address will not be published.

Mais publicações

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
368 visualizações
368 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021
Como se tornar um Engenheiro DevOps em 2021
Artigos
342 visualizações
342 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
311 visualizações
311 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021