Codelab: การจัดกึ่งกลางใน CSS

Adam Argyle

โค้ดแล็บนี้จะช่วยให้คุณแชร์และแสดงวิธีจัดกึ่งกลางใน CSS ที่คุณชื่นชอบได้

อ่านบล็อกโพสต์การจัดกึ่งกลางใน CSS เพื่อดู 5 วิธีการจัดกึ่งกลางใน CSS ที่เราชอบ หรือดูวิดีโอนี้

ตั้งค่า

1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
2. เปิด app/index.html
3. ที่ line 23 ให้แทนที่ /* your centering CSS here /* ด้วย CSS ของคุณ
4. (ไม่บังคับ) ตั้งชื่อเทคนิคการจัดกึ่งกลาง แล้วแทนที่ข้อความใน <h1>

รูปแบบ

1. สร้างไฟล์ใหม่ในโฟลเดอร์ app/css/
2. สร้างตัวเลือกเพื่อเก็บโซลูชันการจัดกึ่งกลาง เช่น .turbo-center หรือ [floaty-mcfloat]
3. เขียนเทคนิคการจัดกึ่งกลางภายในตัวเลือกใหม่นั้น (ดูตัวอย่างของคนอื่นใน app/css/ ได้)
4. (ไม่บังคับ) เขียน "รูปแบบที่รองรับ" เพื่อให้เราทราบว่าเด็กๆ ต้องการรูปแบบใดบ้างเพื่อรองรับการจัดกึ่งกลาง
5. เปิด app/css/index.css และนำเข้าไฟล์ใหม่ด้านล่าง

สรุป

1. เปิด app/index.html อีกครั้ง
2. ค้นหา <article> แล้วตั้งค่าตัวเลือกที่กำหนดเองที่คุณสร้างไว้ในขั้นตอนที่ 2 ของส่วนก่อนหน้า
3. ทวีตภาพข้อบกพร่องมาให้เรา แล้วเราจะแสดงภาพนั้นในบล็อกโพสต์