ใน CSS คุณต้องบ่น คุณสามารถใช้ Margin: 0 auto เพื่อให้ได้การจัดกึ่งกลางแนวนอน แต่ Margin: Auto 0 ไม่สามารถจัดกึ่งกลางแนวตั้งได้
สาเหตุหลักที่นี่คือตัวควบคุมหลักซึ่งก็คือตัวควบคุมนั้นไม่ได้วางตำแหน่งอย่างถูกต้อง เมื่อพิจารณาโค้ดโดยตรง ขั้นแรกคุณต้องใช้เลย์เอาต์แบบสัมพันธ์สำหรับคอนโทรลพาเรนต์ จากนั้นคุณจะต้องใช้เลย์เอาต์แบบสัมบูรณ์สำหรับคอนโทรลลูก และใช้แอตทริบิวต์ด้านบนและด้านล่าง รวมกับระยะขอบ: auto 0; เพื่อให้บรรลุ ผล.
.container-vertical { ตำแหน่ง: สัมพัทธ์: 100%; ความสูง: 200px; พื้นหลัง: deepskyblue; ระยะขอบ: 20px;} จัดแนว: ตรงกลาง พื้นหลัง: สีเหลือง; ความสูงบรรทัด: 80px; ด้านบน: 0; ด้านล่าง: 0; 0;}จัดกึ่งกลางแนวตั้ง.png
จัดกึ่งกลางแนวนอนและแนวตั้งด้วยประสบการณ์ 5.2 เราสามารถลองตั้งค่าคุณสมบัติด้านซ้าย ขวา บน และล่างของตัวควบคุมลูกเป็น 0 และ Margin: Auto; Margins อัตโนมัติในทั้งสี่ทิศทาง เอฟเฟกต์นี้สามารถทำได้ การควบคุมย่อยที่ต้องสังเกตต้องมีแอตทริบิวต์ display: block;
ดูรหัสสิ
.container-horization-vertical { ตำแหน่ง: สัมพันธ์กัน; ความกว้าง: 100%; ความสูง: 200px; พื้นหลัง: deepskyblue; 80px; พื้นหลัง: สีเหลือง; ความสูงบรรทัด: 80px; 0; ด้านล่าง: 0; ขวา: 0; ระยะขอบ: อัตโนมัติ;}สรุป: โซลูชันนี้ยังคงดีมากเมื่อแก้ไขเลย์เอาต์ของเพจที่ไม่ซับซ้อน และสามารถปรับให้เข้ากับอินเทอร์เฟซใดก็ได้และเบราว์เซอร์เกือบทั้งหมด แต่สำหรับเพจที่ซับซ้อนมาก อาจจำเป็นต้องมีวิธีแก้ไขปัญหาอื่น แต่คุณสามารถรับแรงบันดาลใจจากแนวคิดนี้ได้
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network