0 Compartilhamentos 99 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 cortar texto sem usar uma linha de script
Dicas
6 visualizações
Dicas
6 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
13 visualizações
Artigos
13 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
16 visualizações
Dicas
16 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva (positiva) de 2020
Artigos
19 visualizações
19 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
19 visualizações
19 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
26 visualizações
26 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
31 visualizações
31 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

Carlos L. A. da Silva - 18 de dezembro de 2020