O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Codelab: Centralização no CSS

Adam Argyle

Este codelab ensina a compartilhar e mostrar sua maneira favorita de centralizar em CSS.

Confira minha postagem no blog Centralização em CSS para conhecer cinco das minhas maneiras favoritas de centralizar em CSS. Ou assista este vídeo!

Configuração

Clique em Remixar para editar para tornar o projeto editável.
Abrir app/index.html
Em line 23, substitua /* your centering CSS here /* pelo seu CSS.
(Opcional) Dê um nome à sua técnica de centralização e substitua o texto no <h1>

Crie um arquivo na pasta app/css/.
Crie um seletor para manter sua solução de centralização, como .turbo-center ou [floaty-mcfloat].
Dentro desse novo seletor, escreva sua técnica de centralização. Você pode consultar as outras em app/css/ como exemplos.
(opcional) escreva alguns "estilos de suporte" para que possamos ver quais filhos precisam de estilos para apoiar o centralização
Abra app/css/index.css e importe o novo arquivo na parte de baixo.

Abra app/index.html novamente
Encontre o <article> e atribua a ele o seletor personalizado criado na etapa 2 da seção anterior.
Envie um tweet com seu Glitch, e ele vai aparecer na postagem do blog.