Codelab นี้เปิดโอกาสให้คุณแชร์และแสดงวิธีการจัดกึ่งกลางใน CSS ที่คุณชื่นชอบ
ลองดูบล็อกโพสต์ Centering in CSS เพื่อเรียนรู้ 5 วิธี ที่ฉันชอบใช้ CSS เป็นหลัก หรือดูวิดีโอนี้
การตั้งค่า
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- เปิด
app/index.html
- ที่
line 23
ให้แทนที่/* your centering CSS here /*
ด้วย CSS ของคุณ - (ไม่บังคับ) ตั้งชื่อเทคนิคการจัดกึ่งกลางและแทนที่ข้อความใน
<h1>
รูปแบบ
- สร้างไฟล์ใหม่ในโฟลเดอร์
app/css/
- สร้างตัวเลือกเพื่อเก็บโซลูชันการจัดกึ่งกลางไว้ เช่น
.turbo-center
หรือ[floaty-mcfloat]
- ในตัวเลือกใหม่นั้น ให้เขียนเทคนิคการจัดกึ่งกลาง (ลองดูอีกตัวอย่างใน
app/css/
เป็นตัวอย่าง) - (ไม่บังคับ) เขียน "รูปแบบการสนับสนุน" เพื่อให้เราดูว่าเด็กต้องการ สไตล์ใดเพื่อรองรับการจัดกึ่งกลาง
- เปิด
app/css/index.css
แล้วนำเข้าไฟล์ใหม่ที่ด้านล่าง
ผูกมัดให้เต็มที่
- เปิด
app/index.html
อีกครั้ง - ค้นหา
<article>
และกำหนดตัวเลือกที่กำหนดเองซึ่งคุณทำไว้ในขั้นตอนที่ 2 ของส่วนก่อนหน้า - ทวีตฉัน Glitch แล้วฉันจะโพสต์ไว้ในบล็อกโพสต์