Codelab: Centralização no CSS

Adam argyle

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

Confira minha postagem do blog Centralizar no CSS para saber mais sobre as cinco formas favoritas de centralizar o CSS. Ou assista a este vídeo!

Instalaçã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 à técnica de centralização e substitua o texto no <h1>

Estilos

  1. Crie um novo arquivo na pasta app/css/
  2. Crie um seletor para manter sua solução de centralização, como .turbo-center ou [floaty-mcfloat].
  3. Com esse novo seletor, escreva sua técnica de centralização. Se quiser, consulte o outro em app/css/, como exemplos.
  4. (opcional) escreva alguns "estilos de suporte" para que possamos ver quais filhos precisam de estilos para oferecer suporte à centralização
  5. Abra app/css/index.css e importe o novo arquivo na parte inferior da tela.

Juntar tudo

  1. Abra app/index.html novamente
  2. Encontre o <article> e atribua a ele o seletor personalizado que você fez na etapa 2 da seção anterior.
  3. Envie um tweet para mim sobre o Glitch e eu vou incluí-lo na postagem do blog.