ทำตามเทคนิคการจัดกึ่งกลาง 5 อย่างขณะทำการทดสอบชุดต่างๆ เพื่อดูว่าวิธีใดพร้อมรับมือกับการเปลี่ยนแปลงมากที่สุด
การอยู่กึ่งกลางใน CSS เป็นความท้าทายที่เป็นที่รู้จักเนื่องจากมีมุกตลกและการล้อเลียนอยู่ 2020 CSS ต่างเติบโตขึ้นแล้ว และตอนนี้เราสามารถหัวเราะกับมุกตลกเหล่านั้นได้อย่างจริงใจ กัดฟัน
หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube
ความท้าทาย
การจัดกึ่งกลางมีหลายประเภท จากกรณีการใช้งานที่แตกต่างกัน จำนวนสิ่งต่างๆ เพื่อจัดกึ่งกลาง ฯลฯ เพื่อแสดงให้เห็นว่า "ชัยชนะ" เทคนิคการจัดกึ่งกลาง I ได้สร้าง The Resilience Ringer เป็นชุดการทดสอบความเครียดสำหรับการจัดกึ่งกลางแต่ละครั้ง สร้างความสมดุลระหว่างคุณและให้คุณเฝ้าสังเกตประสิทธิภาพของบุคคลเหล่านั้น ในตอนท้าย ฉันเปิดเผยเทคนิคการทำคะแนนสูงที่สุด รวมทั้ง "มีคุณค่ามากที่สุด" เราหวังว่าคุณจะเลิกใช้เทคนิคและโซลูชันใหม่ๆ ในการตั้งจุดศูนย์กลาง
เสียงปลุกความยืดหยุ่น
The Resilience Ringer คือตัวแทนของความเชื่อที่ผมว่า กลยุทธ์ควรมีความยืดหยุ่นสำหรับการจัดวางระหว่างประเทศ วิวพอร์ตขนาดแปรผัน การแก้ไขข้อความ และไดนามิก เนื้อหา หลักการเหล่านี้มีส่วนช่วยกำหนดการทดสอบความยืดหยุ่นต่อไปนี้สำหรับ การตั้งจุดศูนย์กลางอยู่ที่เทคนิคที่มั่นคง:
- ถูกบล็อก: การจัดกึ่งกลางควรจะรองรับการเปลี่ยนแปลงด้านความกว้างได้
- ถูกบล็อก: การจัดกึ่งกลางควรจะรองรับการเปลี่ยนแปลงความสูงได้
- รายการที่ซ้ำกัน: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามจำนวนรายการ
- แก้ไข: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามความยาวและภาษาของเนื้อหา
- ขั้นตอน: การจัดกึ่งกลางควรเป็นทิศทางของเอกสารและโหมดการเขียนไม่จำกัด
โซลูชันที่ชนะควรแสดงให้เห็นถึงความพร้อมรับมือกับปัญหาโดยเก็บเนื้อหาไว้ใน กึ่งกลางขณะที่บีบ บีบ ทำซ้ำ แก้ไข และสลับเป็น โหมดภาษาและเส้นทางต่างๆ ศูนย์ที่น่าเชื่อถือและมีความยืดหยุ่น เป็นศูนย์ที่ปลอดภัย
คำอธิบาย
เราได้ให้คำแนะนำการใช้ภาพสี ซึ่งจะช่วยให้คุณเก็บข้อมูลเมตา ในบริบท:
![](https://web.dev/static/articles/centering-in-css/image/4K35cL1tVpEsGqb4FgKp.png?authuser=1&hl=th)
- เส้นขอบสีชมพูแสดงการเป็นเจ้าของรูปแบบกึ่งกลาง
- กล่องสีเทาคือพื้นหลังของคอนเทนเนอร์ที่ต้องการให้อยู่ตรงกลาง รายการ
- เด็กแต่ละคนจะมีพื้นหลังสีขาว คุณจึงสามารถเห็นเอฟเฟ็กต์ เทคนิคการจัดกึ่งกลางมีผลกับขนาดกล่องย่อย (หากมี)
ผู้แข่งขัน 5 คน
เทคนิคการจัดกึ่งกลาง 5 เทคนิคเข้าสู่ระบำเปลื้องผ้า เพียงแค่ 1 เทคนิคเท่านั้นที่จะได้รับ มงกุฎแห่งความยืดหยุ่น 👸
1. ศูนย์เนื้อหา
- Squish: เยี่ยม!
- สควอช: เยี่ยมเลย!
- ข้อมูลซ้ำ: เยี่ยมเลย
- แก้ไข: เยี่ยมเลย!
- โฟลว์: เยี่ยมไปเลย
การจะเอาชนะความกระชับของ display: grid
และ
place-content
ย่อ เนื่องจากโปรแกรมนี้เป็นศูนย์กลางและตัดสิน
ความสมเหตุสมผลของเด็กๆ
แต่เป็นเทคนิคการจัดกึ่งกลางที่มั่นคงสำหรับกลุ่มองค์ประกอบที่สามารถอ่านได้
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- จัดเนื้อหากึ่งกลางเนื้อหาแม้จะอยู่ในพื้นที่จํากัดและเนื้อหาส่วนเกิน
- รวมการแก้ไขให้อยู่ตรงกลางและบำรุงรักษาในที่เดียว
- การเว้นช่องว่างรับประกันระยะห่างที่เท่ากันในกลุ่มเด็ก n คน
- ตารางกริดจะสร้างแถวโดยค่าเริ่มต้น
- ส่วนย่อยที่กว้างที่สุด (
max-content
) จะกำหนดความกว้างสำหรับส่วนที่เหลือทั้งหมด นี่จะเป็น พูดคุยเพิ่มเติมใน Gentle Flex
เหมาะสำหรับการจัดวางมาโครที่มีย่อหน้าและบรรทัดแรก ต้นแบบ หรือ นั่นคือสิ่งที่ต้องมี การจัดกึ่งกลางที่อ่านได้ชัดเจน
2. แบบยืดหยุ่น
- Squish: เยี่ยม!
- สควอช: เยี่ยมเลย
- ข้อมูลซ้ำ: เยี่ยมมาก
- แก้ไข: เยี่ยมมาก
- โฟลว์: เยี่ยมเลย
Gentle Flex คือกลยุทธ์ที่เน้นจุดศูนย์กลางเท่านั้นอย่างแท้จริง ซึ่งนุ่มนวลนุ่มนวลเพราะ
ซึ่งต่างจาก place-content: center
คือจะไม่มีการเปลี่ยนแปลงขนาดกล่องของเด็กในระหว่าง
การจัดกึ่งกลาง รายการทั้งหมดจะเรียงซ้อนกัน จัดไว้ตรงกลาง และเว้นระยะห่างอย่างน้อยที่สุดเท่าที่จะเป็นไปได้
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- แฮนเดิลเฉพาะการจัดแนว ทิศทาง และการกระจาย
- แก้ไขและบำรุงรักษาได้ในที่เดียว
- ช่องว่างรับประกันระยะห่างที่เท่ากันในกลุ่มเด็ก n คน
- บรรทัดโค้ดส่วนใหญ่
เหมาะสำหรับทั้งเลย์เอาต์มาโครและไมโคร
3. อัตโนมัติบ็อต
- ตุ๊กตา: เยี่ยมเลย
- สควอช: ดีมาก
- ซ้ำกัน: ไม่เป็นไร
- แก้ไข: ดีมาก
- โฟลว์: ดีมาก
คอนเทนเนอร์มีการตั้งค่าให้ยืดหยุ่นโดยไม่มีรูปแบบการปรับแนว ในขณะที่รายการย่อยโดยตรง
ซึ่งจะมีการจัดรูปแบบด้วยระยะขอบอัตโนมัติ มีบางสิ่งที่ชวนให้คิดถึงวันวานและมหัศจรรย์
margin: auto
กำลังทำงานในทุกด้านขององค์ประกอบ
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- เคล็ดลับสนุกๆ
- เร็วและสกปรก
- ผลลัพธ์ที่ไม่แม่นยำเมื่อล้นเกิน
- อาศัยการเผยแพร่มากกว่าการเว้นระยะห่างหมายความว่าเลย์เอาต์สามารถเกิดขึ้นกับเด็กได้ การสัมผัสด้านข้าง
- ถูก "ผลัก" ดูไม่เหมาะสมและอาจส่งผลให้มีการเปลี่ยนแปลง เท่ากับขนาดกล่องของเด็ก
เหมาะสำหรับการจัดไอคอนหรือองค์ประกอบเทียมให้อยู่ตรงกลาง
4. Fluffy Center
- ตุ๊กตา: แย่
- สควอช: แย่
- ซ้ำกัน: ใช้ไม่ได้
- แก้ไข: เยี่ยมมาก
- โฟลว์: เยี่ยมเลย (ตราบใดที่คุณใช้พร็อพเพอร์ตี้เชิงตรรกะ)
ผู้แข่งขัน "ศูนย์ขนปุย" เป็นคู่แข่งที่ฟังดูอร่อยที่สุดของเรา และเป็น เทคนิคการจัดกึ่งกลางที่มีองค์ประกอบทั้งหมด/องค์ประกอบย่อย ดูเฉิดฉายสีชมพูภายใน เส้นขอบ!?
.fluffy-center {
padding: 10ch;
}
- ปกป้องเนื้อหา
- ปรมาณู
- การทดสอบทุกรายการโดยมีกลยุทธ์การอยู่ตรงกลางนี้ซ่อนอยู่
- ช่องว่างของคำ
- ภาพลวงว่าไม่มีประโยชน์
- คอนเทนเนอร์และสินค้าจะเกิดความขัดแย้งกัน เนื่องจากแต่ละคอนเทนเนอร์ หนักแน่นเรื่องขนาด
เหมาะสำหรับการใช้คำหรือวลีเป็นศูนย์กลาง แท็ก ยา ปุ่ม ชิป และ และอีกมากมาย
5. ป๊อปและ พล็อต
- ตุ๊กตา: โอเค
- สควอช: โอเค
- ซ้ำกัน: ใช้ไม่ได้
- แก้ไข: ไม่เป็นไร
- ขั้นตอน: ดี
"ป๊อป" นี้ เพราะตำแหน่งสัมบูรณ์ ทำให้องค์ประกอบโดดเด่น "พล็อต" บางส่วนของชื่อมาจากที่ฉันคิดว่ามีประโยชน์มากที่สุด วางซ้อนทับเนื้อหาอื่นๆ นี่คือโฆษณาซ้อนทับแบบคลาสสิกและมีประโยชน์ โดยจัดวางกึ่งกลาง ที่ยืดหยุ่นและยืดหยุ่นตามขนาดเนื้อหา บางครั้งคุณต้องการ เพื่อแสดง UI ทับ UI อื่นๆ
- มีประโยชน์
- เชื่อถือได้
- ในเวลาที่ต้องการสิ่งนั้นมีประโยชน์มาก
- โค้ดที่มีค่าเปอร์เซ็นต์เป็นลบ
- ต้องใช้
position: relative
เพื่อบังคับบล็อกที่มีการบล็อก - การขึ้นบรรทัดใหม่เริ่มต้นและไม่น่าอึดอัดใจ
- บล็อกที่มีการบล็อกได้เพียง 1 รายการเท่านั้นโดยไม่ต้องดำเนินการใดๆ เพิ่มเติม
เหมาะสำหรับโมดัล ข้อความโทสต์และข้อความ เอฟเฟกต์ซ้อนและความลึก และป๊อปโอเวอร์
ผู้ชนะ
ถ้าฉันอยู่บนเกาะและมีเทคนิคการจัดกึ่งกลางได้เพียง 1 วิธีก็คงจะ...
[รัวกลอง]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
คุณสามารถหาแท็กนี้ได้เสมอในสไตล์ชีตเพราะมีประโยชน์ทั้งในมาโคร เลย์เอาต์ขนาดเล็ก เป็นโซลูชันที่เชื่อถือได้ที่ครอบคลุม ซึ่งมีผลลัพธ์ตรงกับ ความคาดหวัง แล้วก็เพราะผมเป็นคนขี้เกียจตามตัว มันจึงมักจะจบการศึกษา มาใช้โซลูชันนี้ จริงอยู่ ข้อความต้องพิมพ์เยอะก็จริง แต่ประโยชน์ที่ได้ น้ำหนักมากกว่ารหัสพิเศษ
ผู้เล่นยอดเยี่ยม
Fluffy Center
.fluffy-center {
padding: 2ch;
}
Fluffy Center เป็นเทคนิคการจัดกึ่งกลาง จึงมองข้ามได้ง่าย แต่นี่เป็นกลยุทธ์หลักของผม มันน่าทึ่งมากจนบางครั้งผม ลืมไปเลยว่ากำลังใช้อยู่
บทสรุป
อะไรคือสิ่งที่ทำลายกลยุทธ์การเน้นจุดศูนย์กลางของคุณ ความท้าทายอื่นๆ สามารถเพิ่มลงในเสียงเรียกเข้าเพื่อเพิ่มความยืดหยุ่นได้ไหม ฉันถือว่าการแปลและ สวิตช์ความสูงอัตโนมัติบนคอนเทนเนอร์... มีอะไรอีก!
เมื่อรู้แล้วว่าฉันทำแบบนั้นได้อย่างไร คุณจะทำอย่างไร มาเพิ่มความหลากหลายให้กับแนวทางของเรา และเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บ ติดตาม Codelab ด้วยโพสต์นี้ สร้างตัวอย่างการจัดกึ่งกลางของคุณเอง เหมือนที่ปรากฏในโพสต์นี้ ทวีต ฉันเวอร์ชันของคุณ และเราจะเพิ่มรุ่นดังกล่าว ส่วนรีมิกซ์ของชุมชนที่ด้านล่าง