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

ทำตามเทคนิคการกําหนดศูนย์กลาง 5 เทคนิคขณะที่ทําการทดสอบชุดหนึ่งเพื่อดูว่าเทคนิคใดมีความยืดหยุ่นต่อการเปลี่ยนแปลงมากที่สุด

Adam Argyle

การกึ่งกลางใน CSS เป็นงานที่ยากมากจนกลายเป็นเรื่องตลกและถูกล้อเลียน 2020 CSS เติบโตขึ้นมากแล้ว ตอนนี้เราหัวเราะกับมุกตลกเหล่านั้นได้อย่างเต็มเสียงแล้ว

หากต้องการดูวิดีโอ โปรดดูโพสต์เวอร์ชัน YouTube ที่นี่

ความท้าทาย

การกึ่งกลางมีหลายประเภท จากกรณีการใช้งานที่แตกต่างกัน จำนวนสิ่งต่างๆ ที่ต้องจัดกึ่งกลาง ฯลฯ เราจึงสร้าง The Resilience Ringer เพื่อแสดงให้เห็นเหตุผลเบื้องหลังเทคนิคการจัดกึ่งกลางที่ "ได้ผล" เป็นการทดสอบความเครียดชุดหนึ่งสําหรับกลยุทธ์การกําหนดเป้าหมายแต่ละรายการเพื่อหาจุดสมดุลและให้คุณสังเกตประสิทธิภาพ ในตอนท้าย เราจะเปิดเผยเทคนิคที่ได้คะแนนสูงสุด รวมถึงเทคนิคที่ "มีประโยชน์มากที่สุด" เราหวังว่าคุณจะได้เทคนิคและโซลูชันใหม่ในการวางแนว

The Resilience Ringer

รีซิลিয়েนซ์ริงเกอร์แสดงถึงความเชื่อที่ว่ากลยุทธ์การกึ่งกลางควรมีความยืดหยุ่นต่อเลย์เอาต์ในต่างประเทศ วิวพอร์ตขนาดต่างๆ การแก้ไขข้อความ และเนื้อหาแบบไดนามิก หลักการเหล่านี้ช่วยกำหนดการทดสอบความยืดหยุ่นต่อไปนี้สำหรับเทคนิคการจัดกึ่งกลางเพื่อให้ใช้งานได้ต่อไป

  1. ถูกบีบอัด: ควรจัดกึ่งกลางได้เมื่อมีการปรับเปลี่ยนความกว้าง
  2. ถูกบีบอัด: ควรจัดกึ่งกลางได้เมื่อมีการปรับเปลี่ยนความสูง
  3. ทำซ้ำ: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามจำนวนรายการ
  4. แก้ไข: การกึ่งกลางควรปรับตามความยาวและภาษาของเนื้อหา
  5. ขั้นตอน: การจัดกึ่งกลางไม่ควรขึ้นอยู่กับทิศทางของเอกสารและโหมดการเขียน

โซลูชันที่ชนะควรแสดงให้เห็นถึงความยืดหยุ่นโดยการรักษาเนื้อหาให้อยู่ตรงกลางขณะถูกบีบอัด บีบอัดซ้ำ แก้ไข และเปลี่ยนเป็นโหมดและทิศทางภาษาต่างๆ เป็นศูนย์ที่เชื่อถือได้และยืดหยุ่น เป็นศูนย์ที่ปลอดภัย

คำอธิบาย

เราได้ใส่คำแนะนำสีภาพบางส่วนไว้เพื่อช่วยให้คุณคงข้อมูลเมตาบางอย่างไว้ในบริบท

  • เส้นขอบสีชมพูแสดงการเป็นเจ้าของสไตล์การจัดกึ่งกลาง
  • กล่องสีเทาคือพื้นหลังของคอนเทนเนอร์ที่ต้องการจัดวางรายการให้อยู่ตรงกลาง
  • แต่ละรายการย่อยมีพื้นหลังสีขาวเพื่อให้คุณเห็นผลที่เทคนิคการจัดกึ่งกลางมีต่อขนาดกล่องของรายการย่อย (หากมี)

ผู้เข้าแข่งขัน 5 คน

เทคนิคการหาจุดศูนย์กลาง 5 เทคนิคจะเข้าสู่ Resilience Ringer แต่มีเพียงเทคนิคเดียวที่จะรับ 👸มงกุฎแห่งความยืดหยุ่นไปได้

1. ศูนย์เนื้อหา

การแก้ไขและการทำซ้ำเนื้อหาด้วย VisBug
  1. Squish: เยี่ยม
  2. สควอช: เยี่ยมมาก
  3. ซ้ำ: เยี่ยม
  4. Edit: เยี่ยมมาก
  5. Flow: เยี่ยมไปเลย

display: grid และตัวย่อ place-content สั้นกระชับกว่ามาก เนื่องจากจะจัดแนวและจัดตำแหน่งองค์ประกอบย่อยให้อยู่ตรงกลางพร้อมกัน จึงถือเป็นเทคนิคการจัดตำแหน่งที่ยอดเยี่ยมสำหรับกลุ่มองค์ประกอบที่มีไว้เพื่ออ่าน

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
ข้อดี
  • เนื้อหาจะอยู่ตรงกลางแม้ว่าจะมีพื้นที่จำกัดและเนื้อหาล้น
  • การดูแลรักษาและการแก้ไขที่รวมอยู่ในที่เดียว
  • Gap รับประกันการเว้นระยะห่างเท่าๆ กันระหว่างเด็ก n คน
  • ตารางกริดจะสร้างแถวโดยค่าเริ่มต้น
ข้อเสีย

เหมาะสําหรับเลย์เอาต์แบบมาโครที่มีย่อหน้าและบรรทัดแรก ต้นแบบ หรือโดยทั่วไปคือสิ่งที่ต้องจัดกึ่งกลางให้อ่านง่าย

2. การเคลื่อนไหวแบบยืดหยุ่น

  1. Squish: เยี่ยมมาก
  2. สควอช: เยี่ยมมาก
  3. ซ้ำ: เยี่ยมมาก
  4. แก้ไข: เยี่ยมมาก
  5. ขั้นตอน: เยี่ยมมาก

Gentle Flex เป็นกลยุทธ์การเน้นเฉพาะที่แท้จริง การดำเนินการนี้นุ่มนวลและเบาเนื่องจากไม่เหมือน place-content: center ตรงที่จะไม่มีการเปลี่ยนขนาดกล่องของช่องสำหรับเด็กในระหว่างการจัดกึ่งกลาง ระบบจะจัดวางรายการทั้งหมดซ้อนกัน จัดกึ่งกลาง และเว้นระยะห่างอย่างเบาที่สุด

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
ข้อดี
  • จัดการเฉพาะการจัดแนว ทิศทาง และการเผยแพร่
  • แก้ไขและดูแลรักษาได้ในที่เดียว
  • Gap รับประกันการเว้นระยะห่างเท่าๆ กันระหว่างเด็ก n คน
ข้อเสีย
  • โค้ดหลายบรรทัด

เหมาะสำหรับเลย์เอาต์ทั้งแบบมหภาคและแบบไมโคร

3. Autobot

  1. Squish: เยี่ยม
  2. สควอช: ยอดเยี่ยม
  3. ซ้ำ: ใช้ได้
  4. แก้ไข: เยี่ยม
  5. การไหลลื่น: ดีมาก

คอนเทนเนอร์ได้รับการตั้งค่าเป็น Flex ที่ไม่มีสไตล์การจัดตำแหน่ง ส่วนรายการย่อยโดยตรงมีสไตล์เป็นระยะขอบอัตโนมัติ การทํางานกับองค์ประกอบทุกด้านของmargin: autoเป็นประสบการณ์ที่ยอดเยี่ยมและชวนให้นึกถึงอดีต

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
ข้อดี
  • เคล็ดลับสนุกๆ
  • สรุปคร่าวๆ
ข้อเสีย
  • ผลลัพธ์ที่แปลกประหลาดเมื่อแสดงผลเกิน
  • การอาศัยการกระจายแทนช่องว่างหมายความว่าเลย์เอาต์อาจเกิดขึ้นโดยที่เด็กๆ อยู่ชิดขอบ
  • การ "ดัน" บุตรหลานไปยังตำแหน่งหนึ่งๆ นั้นไม่เหมาะและอาจส่งผลให้มีการเปลี่ยนแปลงขนาดกล่องของบุตรหลาน

เหมาะสำหรับการจัดวางไอคอนหรือองค์ประกอบจำลองให้อยู่ตรงกลาง

4. Fluffy Center

  1. Squish: ไม่ดี
  2. สควอช: ไม่ดี
  3. ซ้ำ: ไม่ดี
  4. แก้ไข: เยี่ยมมาก
  5. ขั้นตอน: เยี่ยมมาก (ตราบใดที่คุณใช้พร็อพเพอร์ตี้เชิงตรรกะ)

ผู้เข้าแข่งขัน "fluffy center" เป็นคำที่ฟังดูน่าอร่อยที่สุดเท่าที่เคยมีมา และเป็นเทคนิคการจัดกึ่งกลางเพียงเทคนิคเดียวที่เป็นขององค์ประกอบ/องค์ประกอบย่อยทั้งหมด ดูเส้นขอบสีชมพูด้านในเดี่ยวๆ ของเราไหม

.fluffy-center {
  padding: 10ch;
}
ข้อดี
  • ปกป้องเนื้อหา
  • ปรมาณู
  • การทดสอบทุกรายการมีกลยุทธ์การกึ่งกลางนี้อยู่อย่างลับๆ
  • เว้นวรรคระหว่างคำ
ข้อเสีย
  • ความรู้สึกว่าไม่มีประโยชน์
  • คอนเทนเนอร์และสินค้ามีขนาดใหญ่ไม่เท่ากัน ซึ่งเป็นสิ่งที่เกิดขึ้นได้เนื่องจากแต่ละรายการมีขนาดที่แน่นอน

เหมาะสําหรับการจัดกึ่งกลางที่เน้นคำหรือวลี แท็ก ยาเม็ด ปุ่ม ชิป และอื่นๆ

5. Pop & Plop

  1. Squish: ตกลง
  2. สควอช: ใช้ได้
  3. ซ้ำ: ไม่ดี
  4. แก้ไข: เยี่ยม
  5. ขั้นตอน: ดี

ข้อความ "ปรากฏขึ้น" เนื่องจากการวางตำแหน่งแบบสัมบูรณ์ทำให้องค์ประกอบปรากฏขึ้นนอกลำดับปกติ ส่วน "plop" ในชื่อมาจากตอนที่ฉันพบว่าชื่อนี้มีประโยชน์มากที่สุด ซึ่งก็คือการวางไว้บนสิ่งอื่นๆ ซึ่งเป็นเทคนิคการวางซ้อนแบบคลาสสิกที่มีประโยชน์และปรับขนาดให้เข้ากับเนื้อหาได้ บางครั้งคุณเพียงแค่ต้องวาง UI บน UI อื่น

ข้อดี
  • มีประโยชน์
  • เชื่อถือได้
  • ข้อมูลนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการ
ข้อเสีย
  • โค้ดที่มีค่าเปอร์เซ็นต์เป็นลบ
  • ต้องใช้ position: relative เพื่อบังคับให้มีบล็อกที่รองรับ
  • ตัวแบ่งบรรทัดที่ไม่เหมาะสมและอยู่ในช่วงต้น
  • แต่ละบล็อกที่มีองค์ประกอบนี้จะมีได้เพียง 1 รายการเท่านั้น

เหมาะสําหรับโมดัล ข้อความแจ้งและข้อความ เอฟเฟกต์การซ้อนและระดับความลึก ข้อความป๊อปอัป

ผู้ชนะ

หากฉันอยู่บนเกาะและมีเทคนิคการจัดกึ่งกลางได้เพียง 1 เทคนิค เทคนิคนั้นจะเป็น…

[เสียงกลองรัว]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

คุณจะเห็นมันในสไตล์ชีตของฉันเสมอเพราะมีประโยชน์สำหรับทั้งเลย์เอาต์แบบมาโครและแบบไมโคร เป็นโซลูชันที่เชื่อถือได้รอบด้านซึ่งให้ผลลัพธ์ตรงกับความต้องการของฉัน นอกจากนี้ เนื่องจากฉันเป็นแฟนตัวยงของการปรับขนาดตามข้อมูลที่มีอยู่ จึงมีแนวโน้มที่จะเปลี่ยนไปใช้โซลูชันนี้ ใช่ คุณต้องพิมพ์โค้ดนี้ยาวหน่อย แต่ประโยชน์ที่ได้รับจะคุ้มค่ากับโค้ดเพิ่มเติม

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center เป็นเทคนิคการจัดกึ่งกลางที่ละเอียดมากจนอาจมองข้ามได้ แต่นี่เป็นเทคนิคการจัดกึ่งกลางหลักของฉัน เครื่องมือนี้ใช้งานง่ายมากจนบางครั้งฉันลืมไปว่ากำลังใช้อยู่

บทสรุป

สิ่งใดบ้างที่ทำลายกลยุทธ์การกําหนดศูนย์กลาง เราสามารถเพิ่มโจทย์อื่นๆ ใดลงในกระดิ่งความยืดหยุ่นได้บ้าง เราพิจารณาการแปลและปุ่มสลับความสูงอัตโนมัติในคอนเทนเนอร์แล้ว มีอะไรอีกไหม

ตอนนี้คุณรู้วิธีที่เราทําแล้ว คุณจะทําอย่างไร มาลองใช้แนวทางที่หลากหลายและดูวิธีทั้งหมดในการสร้างบนเว็บกัน ทำตาม Codelab ในโพสต์นี้เพื่อสร้างตัวอย่างการจัดกึ่งกลางของคุณเอง เช่นเดียวกับตัวอย่างในโพสต์นี้ โปรดทวีตเวอร์ชันของคุณมาให้เรา แล้วเราจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ของชุมชน