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

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

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

margin-left: auto;

margin-right: auto;

width: 168px;

}

วิธีนี้ทำงานได้ดีมากในเบราว์เซอร์หลัก ๆ ส่วนใหญ่ แม้แต่ IE6 บนแพลตฟอร์ม Windows ในโหมดความเข้ากันได้มาตรฐาน ( โหมดการปฏิบัติตามข้อกำหนด) ก็แสดงได้ตามปกติ แต่น่าเสียดายที่ใน IE เวอร์ชันต่ำกว่า การตั้งค่านี้ไม่ได้รับผลจากการจัดกึ่งกลาง ดังนั้น หากคุณต้องการใช้วิธีนี้ในโปรเจ็กต์จริง คุณต้องแน่ใจว่าเวอร์ชันเบราว์เซอร์ IE ของผู้ใช้ไม่ต่ำกว่า 6.0
แม้ว่าการสนับสนุนจะน้อยกว่าอุดมคติ แต่นักออกแบบส่วนใหญ่แนะนำให้ใช้แนวทางนี้ทุกครั้งที่เป็นไปได้ วิธีนี้ยังถือว่าถูกต้องและสมเหตุสมผลที่สุดในบรรดาวิธีการต่าง ๆ เพื่อให้องค์ประกอบอยู่ตรงกลางแนวนอนโดยใช้ CSS
2. ใช้การจัดตำแหน่งข้อความเพื่อให้อยู่ตรงกลาง อีกวิธีหนึ่งในการทำให้องค์ประกอบอยู่ตรงกลางคือการใช้แอตทริบิวต์การจัดตำแหน่งข้อความ วิธีนี้เป็นแฮ็กที่สมบูรณ์ แต่เข้ากันได้กับเบราว์เซอร์ส่วนใหญ่ ดังนั้นจึงมีความจำเป็นตามธรรมชาติในบางกรณี
สาเหตุที่เรียกว่าแฮ็กก็คือวิธีนี้ไม่ได้ใช้แอตทริบิวต์ข้อความกับข้อความ แต่ใช้กับองค์ประกอบที่เป็นคอนเทนเนอร์ นอกจากนี้ยังสร้างงานพิเศษให้กับเราอีกด้วย หลังจากสร้าง div ที่จำเป็นสำหรับเลย์เอาต์แล้ว เราจำเป็นต้องใช้แอตทริบิวต์ text-align กับเนื้อหาตามโค้ดต่อไปนี้:

body{

text-align:center;

}

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

p {
การจัดแนวข้อความ: ซ้าย;
-

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

body {
การจัดแนวข้อความ: กึ่งกลาง;
-
#คอนเทนเนอร์ {
ขอบซ้าย: อัตโนมัติ;
ขอบขวา: อัตโนมัติ;
เส้นขอบ: 1px สีแดงทึบ;
ความกว้าง: 168px;
การจัดแนวข้อความ: ไปทางซ้าย
-

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

#คอนเทนเนอร์ {
พื้นหลัง: #ffc url(mid.jpg) ทำซ้ำ-y center;
ตำแหน่ง: แน่นอน;
ซ้าย: 50%;
ความกว้าง: 760px;
ขอบซ้าย: -380px;
-

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