การจัดกึ่งกลางใน 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. แก้ไข: เยี่ยมเลย!
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. ตุ๊กตา: เยี่ยมเลย
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 พร้อมบล็อกโพสต์