ก่อนอื่น มาดูโค้ดไฟล์ XHTML/HTML ของผมกันก่อน (บางส่วน) จุดประสงค์ของเราคือจัด #container ให้อยู่กึ่งกลางในแนวนอน
<ร่างกาย>
<div id="คอนเทนเนอร์">
<h1>เนื้อหา</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>ใช้ระยะขอบแบบปรับได้ (ระยะขอบอัตโนมัติ)
วิธีที่ต้องการจัดกึ่งกลางองค์ประกอบใดๆ ในแนวนอนคือการใช้คุณสมบัติระยะขอบและตั้งค่าด้านซ้ายและขวาเป็นอัตโนมัติ แต่คุณต้องระบุความกว้างสำหรับ #container
div#คอนเทนเนอร์ {
ขอบซ้าย: อัตโนมัติ;
ขอบขวา: อัตโนมัติ;
ความกว้าง:168px;
-
โซลูชันนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ แม้แต่ IE6 ตราบใดที่ยังอยู่ในโหมดการปฏิบัติตามมาตรฐานเว็บ น่าเสียดายที่ไม่สามารถใช้กับ IE/Win เวอร์ชันก่อนหน้าได้ เราจัดทำตารางสำหรับสิ่งนี้: การเรียกดูรายการสนับสนุนเส้นขอบแบบปรับได้ การสนับสนุนเวอร์ชันของเบราว์เซอร์
Internet Explorer 6.0 โหมดการปฏิบัติตามข้อกำหนด ใช่
Internet Explorer 6.0 โหมดนิสัยใจคอหมายเลข
Internet Explorer 5.5 Windows หมายเลข
Internet Explorer 5.0 Windows หมายเลข
Internet Explorer 5.2 แมคอินทอช ใช่
Mozilla เวอร์ชันปัจจุบันทั้งหมดคือ
Mozilla Firefox ทุกรุ่นคือ
Netscape 4.x หมายเลข
Netscape 6.x+ ใช่
Opera 6.0, 7.0 Macintosh และ Windows ใช่
ซาฟารี 1.2 ใช่
แม้ว่าจะถูกจำกัดด้วยการสนับสนุนเบราว์เซอร์ แต่นักออกแบบส่วนใหญ่สนับสนุนให้คุณทำเช่นนี้ทุกครั้งที่เป็นไปได้ แต่เรายังคงใช้ CSS ได้ทุกสถานการณ์ การใช้การจัดตำแหน่งข้อความ (การจัดตำแหน่งข้อความ) โซลูชันนี้จำเป็นต้องใช้คุณสมบัติการจัดตำแหน่งข้อความ ซึ่งใช้กับองค์ประกอบเนื้อหาและกำหนดค่าเป็นศูนย์
ร่างกาย{
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
มันยุติธรรมกับเบราว์เซอร์ทั้งหมด ละเอียดถี่ถ้วน และอยู่ใกล้แค่ปลายนิ้วของคุณ อย่างไรก็ตาม นี่เป็นคุณสมบัติที่กำหนดให้กับข้อความ ซึ่งทำให้ข้อความใน #container อยู่ตรงกลางเช่นกัน ดังนั้นเราจึงต้องทำงานเพิ่มเติมเกี่ยวกับเลย์เอาต์:
div#คอนเทนเนอร์{
การจัดแนวข้อความ: ซ้าย;
-
ด้วยวิธีนี้ การจัดตำแหน่งข้อความจึงสามารถกลับสู่สถานะเริ่มต้นได้ เส้นขอบแบบรวมและการจัดตำแหน่งข้อความ เนื่องจากการจัดตำแหน่งข้อความเข้ากันได้แบบย้อนหลังและเบราว์เซอร์ร่วมสมัยยังรองรับเส้นขอบแบบปรับได้ นักออกแบบจำนวนมากจึงรวมเส้นขอบเหล่านี้เข้าด้วยกันเพื่อให้ใช้งานข้ามเบราว์เซอร์ได้
ร่างกาย{
การจัดแนวข้อความ: กึ่งกลาง;
-
#คอนเทนเนอร์ {
ขอบซ้าย: อัตโนมัติ;
ขอบขวา: อัตโนมัติ;
เส้นขอบ: 1px สีแดงทึบ;
ความกว้าง: 168px;
การจัดแนวข้อความ: ไปทางซ้าย
-
อนิจจา มันยังไม่สมบูรณ์แบบเพราะมันยังเป็นแฮ็คอยู่ คุณต้องเขียนกฎซ้ำซ้อนสำหรับการจัดเรียงข้อความ แต่ตอนนี้เราสามารถใช้โซลูชันข้ามเบราว์เซอร์ที่สมบูรณ์แบบยิ่งขึ้นได้
คำตอบขอบเขตลบ