Codelab: Centralização no CSS

Este codelab prepara você para compartilhar e mostrar sua maneira favorita de centralizar CSS.

Confira minha postagem do blog Centralização em CSS para saber mais sobre cinco das minhas formas favoritas de centralizar o CSS. Ou assista a 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) Nomeie sua técnica de centralização e substitua o texto na <h1>

Estilos

  1. Crie um novo arquivo na pasta app/css/.
  2. Crie um seletor para armazenar sua solução de centralização, como .turbo-center ou [floaty-mcfloat]
  3. Com esse novo seletor, escreva sua técnica de centralização (fique à vontade para olhar um de outro em app/css/, por exemplo)
  4. (opcional) escreva alguns "estilos de suporte" para saber quais crianças precisam para dar suporte à centralização
  5. Abra app/css/index.css e importe o novo arquivo na parte inferior

Vincule tudo

  1. Abrir app/index.html novamente
  2. Encontre o <article> e insira o seletor personalizado que você fez na etapa 2 do na seção anterior.
  3. Envie um tweet sobre seu Glitch para que eu a apresente a postagem do blog.