Codelab: Centrar en CSS

Adam Argyle

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

Consulta mi entrada de blog Centering in CSS para conocer 5 de mis formas favoritas de centrar elementos en CSS. O mira este video.

Configuración

1. Haz clic en Remix to Edit 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 contener tu solución de centrado, como .turbo-center o [floaty-mcfloat].
3. En ese nuevo selector, escribe tu técnica de centrado (puedes consultar las otras en app/css/ como ejemplos).
4. (Opcional) Escribe algunos "estilos de soporte" para que podamos ver qué hijos necesitan estilos para admitir el centrado.
5. Abre app/css/index.css y, luego, importa tu archivo nuevo en la parte inferior.

Cómo atar 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. Tuitea tu Glitch y lo destacaré en la entrada del blog.