Codelab: Pemusatan di CSS

Adam Argyle

Codelab ini menyiapkan Anda untuk membagikan dan menampilkan cara favorit Anda untuk memusatkan di CSS.

Lihat postingan blog saya Pusat di CSS untuk mempelajari 5 cara favorit saya untuk memusatkan di CSS. Atau tonton video ini.

Penyiapan

  1. Klik Remix to Edit untuk membuat 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, seperti .turbo-center atau [floaty-mcfloat]
  3. Dalam pemilih baru tersebut, tulis teknik pemusatan Anda (lihat yang lain di app/css/ sebagai contoh)
  4. (opsional) tulis beberapa "gaya dukungan" agar kita dapat melihat turunan mana yang memerlukan gaya untuk mendukung pemusatan
  5. Buka app/css/index.css dan impor file baru Anda di bagian bawah

Menggabungkan semuanya

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