Codelab: centratura in CSS

Adam Argyle

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

Leggi il mio post del blog Centering in CSS per scoprire 5 dei miei modi preferiti per centrare gli elementi in CSS. Oppure guarda questo video.

Configurazione

  1. Fai clic su Remixa 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 in <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 prendere come esempio le altre in app/css/)
  4. (facoltativo) scrivi alcuni "stili di supporto" per vedere quali bambini hanno bisogno di stili per supportare il centraggio
  5. Apri app/css/index.css e importa il nuovo file in basso.

Tirare le somme

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