Codelab: Pemusatan di CSS

Adam Argyle

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

Lihat postingan blog saya Centering in CSS untuk mempelajari 5 cara favorit saya untuk menempatkan elemen di tengah 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 penengahan Anda dan ganti teks di <h1>

Gaya

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

Satukan semuanya

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