Codelab: centratura in CSS

Adam Argyle

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

Dai un'occhiata al mio post del blog Centraggio in CSS per scoprire 5 dei miei metodi preferiti per allineare in CSS. In alternativa, 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 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 guardare come esempio quella dell'altro in app/css/)
  4. (Facoltativo) Scrivi alcuni "stili di supporto" per consentirci di vedere quali bambini hanno bisogno di stili per supportare il centratura
  5. Apri app/css/index.css e importa il nuovo file in basso

Tirare le somme

  1. Apri di nuovo app/index.html
  2. Individua <article> e assegna 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.