Codelab: Centrar en CSS

Adam Argyle

En este codelab, aprenderás a compartir y mostrar tu forma favorita de centrar en CSS.

Consulta mi entrada de blog Centrado en CSS para obtener información sobre 5 de mis formas favoritas de centrar en CSS. También puedes mirar este video.

Configuración

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

Estilos

  1. Crea un archivo nuevo en la carpeta app/css/
  2. Crea un selector para contener tu solución de centrado, como .turbo-center o [floaty-mcfloat].
  3. Dentro de ese nuevo selector, escribe tu técnica de centrado (no dudes en mirar las otras en app/css/ como ejemplos).
  4. (opcional) Escribe algunos “estilos de compatibilidad” para que podamos ver qué elementos secundarios necesitan estilos para admitir el centrado.
  5. Abre app/css/index.css y, luego, importa tu archivo nuevo en la parte inferior.

Cómo unir todo

  1. Cómo 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íame un tweet con tu Glitch y lo incluiré en la entrada de blog.