Codelab: Centrar en CSS

Este codelab te prepara para compartir y mostrar tu forma favorita de centrar en o CSS.

Consulta mi entrada de blog Centering in CSS para obtener información sobre 5 de mis formas favoritas de centrarme en CSS. ¡O mira este video!

Configuración

  1. Haz clic en Remix para editar para que el proyecto se pueda editar.
  2. Abrir app/index.html
  3. En line 23, reemplaza /* your centering CSS here /* por tu CSS
  4. (Opcional) Asigna un nombre a tu técnica de centrado y reemplaza el texto en <h1>

Estilos

  1. Crea un archivo nuevo en la carpeta app/css/.
  2. Crea un selector para conservar tu solución de centrado, como .turbo-center. [floaty-mcfloat]
  3. Dentro de ese nuevo selector, escribe tu técnica de enfoque (no dudes en mirar la otra en app/css/ como ejemplo)
  4. Escribe algunos “estilos de compatibilidad” (opcional). para poder ver qué niños necesitan estilos para admitir el enfoque
  5. Abre app/css/index.css y, luego, importa el archivo nuevo en la parte inferior

Vincular todo

  1. Vuelve a abrir app/index.html
  2. Busca el elemento <article> y asígnale el selector personalizado que creaste en el paso 2 de la sección anterior.
  3. Twittea tu Glitch y lo incluiré en la entrada de blog.