Codelab: centratura in CSS

Questo codelab ti consente di condividere e mostrare il tuo modo preferito di concentrarsi sul CSS.

Consulta il mio post del blog Centering in CSS per scoprire 5 di i miei modi preferiti per centrare in CSS. Oppure guarda questo video

Configurazione

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  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 nel <h1>

Stili

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

Lega tutto

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