วิธีแสดงองค์ประกอบกึ่งกลางแนวนอนใน CSS

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

1. ใช้ระยะขอบอัตโนมัติเพื่อให้อยู่กึ่งกลาง

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

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

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

2. ใช้การจัดตำแหน่งข้อความเพื่อให้อยู่ตรงกลาง

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

สาเหตุที่เรียกว่าแฮ็กก็คือวิธีนี้ไม่ได้ใช้แอตทริบิวต์ข้อความกับข้อความ แต่ใช้กับองค์ประกอบที่เป็นคอนเทนเนอร์ นอกจากนี้ยังสร้างงานพิเศษให้กับเราอีกด้วย หลังจากสร้าง div ที่จำเป็นสำหรับเลย์เอาต์แล้ว เราจำเป็นต้องใช้แอตทริบิวต์ text-align กับเนื้อหาตามโค้ดต่อไปนี้:

จะมีปัญหาใดๆ ในภายหลังหรือไม่ องค์ประกอบสืบทอดทั้งหมดของร่างกายจะแสดงอยู่ตรงกลาง

ดังนั้นเราจึงจำเป็นต้องเขียนกฎอื่นเพื่อคืนข้อความให้อยู่ในการจัดตำแหน่งด้านซ้ายเริ่มต้น:

คุณสามารถจินตนาการได้ว่ากฎเพิ่มเติมนี้จะทำให้เกิดความไม่สะดวก นอกจากนี้ เบราว์เซอร์ที่ปฏิบัติตามมาตรฐานอย่างแท้จริงจะไม่เปลี่ยนตำแหน่งของคอนเทนเนอร์ แต่จะเน้นเฉพาะข้อความที่อยู่ตรงกลางเท่านั้น

3. ใช้ระยะขอบอัตโนมัติและการจัดตำแหน่งข้อความร่วมกัน

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

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

4. วิธีแก้ปัญหาระยะขอบติดลบ

วิธีแก้ปัญหาระยะขอบติดลบเป็นมากกว่าการเพิ่มระยะขอบติดลบให้กับองค์ประกอบต่างๆ วิธีการนี้ต้องใช้ทั้งการวางตำแหน่งที่แน่นอนและระยะขอบติดลบ

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

จากนั้น ตั้งค่าระยะขอบด้านซ้ายของคอนเทนเนอร์ให้เป็นค่าลบครึ่งหนึ่งของความกว้างของคอนเทนเนอร์ วิธีนี้จะยึดคอนเทนเนอร์ไว้ที่จุดกึ่งกลางแนวนอนของหน้า

แม้ว่านี่จะไม่ใช่วิธีแก้ปัญหาที่แนะนำ แต่ก็เป็นแนวทางที่ดีและสามารถนำไปใช้ได้หลากหลาย