Modern Web Guidance ya es estable Actualiza tus agentes de programación con prácticas recomendadas de desarrollo web validadas por expertos. Lee el anuncio.

Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Codelab: Centrar en CSS

Adam Argyle

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

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

Configuración

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

Conclusión

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