Codelab: Pemusatan di CSS
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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
- Klik Remix untuk Mengedit agar project dapat diedit.
- Buka
app/index.html
- Di
line 23
, ganti /* your centering CSS here /*
dengan CSS Anda
- (opsional) Beri nama teknik pemusatan Anda dan ganti teks di
<h1>
Gaya
- Buat file baru di folder
app/css/
- Buat pemilih untuk menyimpan solusi pemusatan Anda, seperti
.turbo-center
atau
[floaty-mcfloat]
- Dalam pemilih baru tersebut, tulis teknik pemusatan Anda (jangan ragu untuk melihat
yang lain di
app/css/
sebagai contoh)
- (opsional) tulis beberapa "gaya dukungan" sehingga kita dapat melihat turunan mana yang memerlukan gaya untuk mendukung pemusatan
- Buka
app/css/index.css
dan impor file baru Anda di bagian bawah
Gabungkan semuanya
- Buka
app/index.html
lagi
- Temukan
<article>
dan berikan pemilih kustom yang Anda buat di langkah #2
di bagian sebelumnya.
- Tweet saya Glitch Anda dan saya akan menampilkannya di postingan blog.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2020-12-16 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Informasi yang saya butuhkan tidak ada"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Terlalu rumit/langkahnya terlalu banyak"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Sudah usang"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Masalah terjemahan"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Masalah kode / contoh"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Lainnya"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Mudah dipahami"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Memecahkan masalah saya"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Lainnya"
}]