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

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

Adam Argyle

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

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

ความท้าทาย

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

The Resilience Ringer

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

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

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

คำอธิบาย

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

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

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

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

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

1. Squish: เยี่ยมเลย
2. สควอช: เยี่ยมมาก
3. ซ้ำ: เยี่ยม
4. Edit: เยี่ยมมาก
5. Flow: เยี่ยมไปเลย

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

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

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;
}

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

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 อื่น

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

ผู้ชนะ

หากฉันอยู่บนเกาะและมีเทคนิคการจัดกึ่งกลางได้เพียง 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 ในโพสต์นี้เพื่อสร้างตัวอย่างการจัดกึ่งกลางของคุณเอง เช่นเดียวกับตัวอย่างในโพสต์นี้ ทวีตเวอร์ชันของคุณมาให้เรา แล้วเราจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

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

• CSS Tricks พร้อมบล็อกโพสต์