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

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

Estilos

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

Reúna tudo

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