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
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Apri
app/index.html
- In
line 23
, sostituisci/* your centering CSS here /*
con il tuo CSS - (Facoltativo) Assegna un nome alla tecnica di centratura e sostituisci il testo nella
<h1>
Stili
- Crea un nuovo file nella cartella
app/css/
- Crea un selettore per contenere la soluzione di centratura, ad esempio
.turbo-center
o[floaty-mcfloat]
- All'interno del nuovo selettore, scrivi la tecnica di centratura (puoi guardare come esempi gli altri in
app/css/
) - (facoltativo) scrivi alcuni "stili di supporto" in modo da poter vedere quali bambini hanno bisogno di stili che supportino
- Apri
app/css/index.css
e importa il nuovo file in basso
Connettiti con il tuo benessere
- Apri di nuovo
app/index.html
- Trova il
<article>
e assegnagli il selettore personalizzato che hai creato nel passaggio 2 della sezione precedente. - Inviami un tweet con il tuo Glitch e lo inserirò nel post del blog.