Codelab: Centrar en CSS

Adam Argyle

En este codelab, te prepararás para compartir y mostrar tu forma favorita de centrar en CSS.

Consulta la entrada de mi blog Centering in CSS (Cómo centrarse en CSS) para obtener información sobre 5 de mis formas favoritas de centrarme en CSS. ¡O bien, mira este video!

Configuración

  1. Haz clic en Remix to Edit para que el proyecto sea editable.
  2. Abrir app/index.html
  3. En line 23, reemplaza /* your centering CSS here /* por tu CSS.
  4. (Opcional) Asigna un nombre a la 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 mantener tu solución de centrado, como .turbo-center o [floaty-mcfloat].
  3. Dentro de ese nuevo selector, escribe tu técnica de centro (siéntete libre de mirar el otro en app/css/ como ejemplos).
  4. (Opcional) Escribe algunos "estilos de compatibilidad" para que podamos ver qué elementos secundarios necesitan estilos para centrar la atención
  5. Abre app/css/index.css e importa el archivo nuevo en la parte inferior.

Organiza todo

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