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

อัครเดช ชัยดี

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

ลองดูบล็อกโพสต์ Centering in 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. ทวีตฉัน Glitch แล้วฉันจะโพสต์ไว้ในบล็อกโพสต์