Codelab: Pemusatan di CSS

Codelab ini menyiapkan Anda untuk berbagi dan menampilkan cara favorit Anda dalam berfokus pada di CSS.

Lihat postingan blog saya yang berjudul Berpusat di CSS untuk mempelajari tentang 5 cara favorit saya untuk berpusat di CSS. Atau tonton video ini!

Penyiapan

  1. Klik Remix to Edit agar project dapat diedit.
  2. Buka app/index.html
  3. Di line 23, ganti /* your centering CSS here /* dengan CSS Anda
  4. (opsional) Beri nama teknik pemusatan Anda dan ganti teks di <h1>

Gaya

  1. Buat file baru di folder app/css/
  2. Buat pemilih untuk menyimpan solusi pemusatan Anda, seperti .turbo-center atau [floaty-mcfloat]
  3. Dalam pemilih baru tersebut, tulis teknik pemusatan Anda (jangan ragu untuk dengan yang lain di app/css/ sebagai contoh)
  4. (opsional) tulis beberapa "gaya dukungan" sehingga kita dapat melihat anak mana yang membutuhkan gaya untuk mendukung pemusatan
  5. Buka app/css/index.css dan impor file baru Anda di bagian bawah

Kaitkan semuanya

  1. Buka app/index.html lagi
  2. Temukan <article> dan berikan pemilih kustom yang Anda buat di langkah #2 bagian sebelumnya.
  3. Tweet saya terkait Glitch Anda dan saya akan menampilkannya di postingan blog!