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
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- Abrir
app/index.html
- En
line 23
, reemplaza/* your centering CSS here /*
por tu CSS - (Opcional) Asigna un nombre a tu técnica de centrado y reemplaza el texto en
<h1>
Estilos
- Crea un archivo nuevo en la carpeta
app/css/
. - Crea un selector para conservar tu solución de centrado, como
.turbo-center
.[floaty-mcfloat]
- Dentro de ese nuevo selector, escribe tu técnica de enfoque (no dudes en mirar
la otra en
app/css/
como ejemplo) - Escribe algunos “estilos de compatibilidad” (opcional). para poder ver qué niños necesitan estilos para admitir el enfoque
- Abre
app/css/index.css
y, luego, importa el archivo nuevo en la parte inferior
Vincular todo
- Vuelve a abrir
app/index.html
- Busca el elemento
<article>
y asígnale el selector personalizado que creaste en el paso 2 de la sección anterior. - Twittea tu Glitch y lo incluiré en la entrada de blog.