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 ของคุณ และฉันจะแสดงเนื้อหาใน บล็อกโพสต์นั้น