Codelab: Centralização no CSS

Adam Argyle

Este codelab ajuda você a compartilhar e mostrar sua maneira favorita de centralizar em CSS.

Confira minha postagem no blog Centralização no CSS para saber mais sobre cinco das minhas formas favoritas de centralizar no CSS. Ou assista este vídeo.

Configuração

  1. Clique em Remix to Edit 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 em <h1>

Estilos

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

Resumo

  1. Abrir 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 para que eu possa publicar na postagem do blog.