Codelab: Pemusatan di CSS

Adam Argyle

Codelab ini menyiapkan Anda untuk berbagi dan menampilkan cara pemusatan favorit Anda dalam CSS.

Lihat postingan blog saya yang berjudul Centering in CSS untuk mempelajari 5 cara favorit saya untuk menempatkan CSS di tengah. Atau tonton video ini!

Penyiapan

  1. Klik Remix untuk Mengedit 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 melihat yang lain di app/css/ sebagai contoh)
  4. (opsional) tulis beberapa "gaya dukungan" sehingga 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

Gabungkan semuanya

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