Codelab: centratura in CSS

Adam Argyle

Questo codelab ti consente di condividere e mostrare il tuo modo preferito di centrare l'immagine in CSS.

Dai un'occhiata al mio post del blog Centramento in CSS per scoprire 5 dei miei modi preferiti per centrare l'immagine in CSS. Oppure guarda questo video!

Configurazione

1. Fai clic su Remix per modificare per rendere il progetto modificabile.
2. Apri app/index.html
3. In line 23, sostituisci /* your centering CSS here /* con il tuo CSS
4. (Facoltativo) Assegna un nome alla tecnica di centratura e sostituisci il testo nella <h1>

Stili

1. Crea un nuovo file nella cartella app/css/
2. Crea un selettore per contenere la soluzione di centratura, ad esempio .turbo-center o [floaty-mcfloat]
3. All'interno del nuovo selettore, scrivi la tecnica di centratura (puoi guardare come esempi gli altri in app/css/)
4. (facoltativo) scrivi alcuni "stili di supporto" in modo da poter vedere quali bambini hanno bisogno di stili che supportino
5. Apri app/css/index.css e importa il nuovo file in basso

Connettiti con il tuo benessere

1. Apri di nuovo app/index.html
2. Trova il <article> e assegnagli il selettore personalizzato che hai creato nel passaggio 2 della sezione precedente.
3. Inviami un tweet con il tuo Glitch e lo inserirò nel post del blog.