Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

บทสรุปของการใช้ CSS จัดกึ่งกลาง

by
Difficulty:BeginnerLength:ShortLanguages:

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

คุณ Chris Coyier เพิ่งออกบทความ วิธีการตัดสินใจเลือกใช้ CSS จัดกึ่งกลาง บนเว็บไซต์ CSS Tricks ของเขา เพื่อแสดงถึงหลากหลายวิธีในการจัดกึ่งกลางโดยใช้ CSS ไม่ว่าจะเป็นแบบ horizontal หรือ vertical ก็ตาม ในขณะที่ผลลัพธ์แต่ละตัวอย่างมีข้อดีข้อด้อยต่างกันไป เมื่อนำมารวมกัน มันจะได้เครื่องมือจัดกึ่งกลางใหม่ที่สามารถทำงาน cross-browser ใน IE8 หรือ สูงขึ้นไปได้อย่างดี

และนี่ จะบอกคุณว่าทำอย่างไร

Note: เพื่อที่จะให้เกิดความเข้าใจที่ครอบคลุม ผมได้อธิบายไว้ทั้งรูปแบบวิดีโอพร้อมกับการเขียนบทความ

ดูวิดีโอได้ที่นี่

ดาวโหลดวิดีโอ หรือ subscribe ช่อง Tuts+ Web Design บน Youtube ได้เลย

อ่านบทความ

ถ้าคุณกำลังจะสร้าง responsive website คุณมักจะคุ้นเคยกับการกำหนดขนาดของ element ด้วย percent งั้นลองสร้าง element .container ขึ้นมาลอยๆ ดู

เพื่อให้แน่ใจว่า element container ของเราขยายออกไปอย่างพอดี ลองตั้งค่า html, body { width: 100%; height: 100%; } ดู

ลองใช้เทคนิคตาราง

จากนั้น ภายใน .container เรากำลังจะเซ็ต vertical center ในรูปแบบของตาราง นี่จะทำให้ block level element แบบธรรมดาแสดงผลเหมือน table cell ช่วยให้เราสามารถกำหนดค่า vertical center ได้

สุดท้าย เราจะเพิ่ม element ที่เป็น horizontal center เข้าไป

ภายในนั้น คุณสามารถใส่อะไรก็ได้ตามที่คุณต้องการ เช่น dynamic height text block หรือไม่ว่าจะเป็น element แบบ absolute position

แสดงตัวอย่างบน Github

ทางเลือกอื่นๆ

ถ้าจะเป็น horizontal center ของ element เพียงแค่แก้ค่าภายใน .inner text-align property ถ้าจะเปลี่ยน vertical center ให้แก้ .inner vertical-align property

บทสรุป

เหมือนเราจะใช้ markup จำนวนมากในตัวอย่าง แต่ที่สำคัญก็มีแค่ div .outer .inner .centered เท่านั้น และการ style เหล่านี้นั้นจะใช้งานได้ดีจนคุณไม่ต้องกังวลกับมันอีกต่อไป และนำไปใช้เป็น CSS ต้นแบบในหลายๆ project

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.