Codelab: การจัดกึ่งกลางใน CSS
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
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 ของคุณ และฉันจะแสดงเนื้อหาใน
บล็อกโพสต์นั้น
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2020-12-16 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2020-12-16 UTC"],[],[]]