- วิธีจัดกึ่งกลางภาพใน Div แนวนอน
- คุณสมบัติมาร์จิ้น
- โมดูลเฟล็กซ์บ็อกซ์
- เค้าโครงมุมมองกริด
- แอตทริบิวต์ตำแหน่ง
วิธีจัดกึ่งกลางภาพใน Div แนวนอน
นักพัฒนาสามารถใช้คุณสมบัติระยะขอบ โมดูล Flexbox เลย์เอาต์ Grid View และแอตทริบิวต์ Position เพื่อจัดกึ่งกลางรูปภาพใน div ในแนวนอน ทำตามคำแนะนำด้านล่างเพื่อจัดกึ่งกลางภาพตามแนวนอนในแท็ก div
สมมติว่ามี div ที่รูปภาพถูกวางไว้ในลักษณะนี้ในไฟล์ HTML:
< แผนก ระดับ = 'ราก' >
< img src = '../book.jpg' ความสูง = 'ห้าสิบ%' ความกว้าง = 'ห้าสิบ%' ระดับ = 'ภาพ' >
< / แผนก >
รูปภาพมีความกว้างและความสูง 50% และคลาสของ 'รูปภาพ'
การใช้คุณสมบัติมาร์จิ้น
ผู้ใช้สามารถเพิ่มช่องว่างรอบองค์ประกอบ HTML โดยใช้คุณสมบัติระยะขอบ กำหนดระยะขอบตามพื้นที่ว่างหลังจากปรับขนาดหน้าจอหน้าต่าง ตัวอย่างเช่น ตั้งค่าระยะขอบซ้ายและขวาเป็นอัตโนมัติ และตั้งค่าคุณสมบัติการแสดงผลเป็นบล็อก:
img {
จอแสดงผล: บล็อก;
ขอบซ้าย: อัตโนมัติ;
ขอบขวา: อัตโนมัติ;
}
หลังจากดำเนินการตามตัวอย่างข้างต้น หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตด้านบนแสดงว่ารูปภาพอยู่ตรงกลางแล้ว
การใช้โมดูล Flexbox
“ เฟล็กซ์บ็อกซ์ ” เป็นโมดูลที่มีคุณสมบัติครบชุด ในกรณีของเรา ให้เลือกคลาสองค์ประกอบรูทและใช้ flex เป็นค่าของคุณสมบัติการแสดงผล ตั้งศูนย์เป็นค่าสำหรับ “ ปรับเนื้อหา ' และ ' จัดรายการ ' คุณสมบัติ:
.ราก {จอแสดงผล: ดิ้น;
ปรับ- เนื้อหา : ศูนย์;
จัดรายการ: ศูนย์;
พื้นหลัง- สี : สีฟ้า;
}
หน้าเว็บมีลักษณะดังนี้ หลังจากรันโค้ด:
เอาต์พุตด้านบนแสดงให้เห็นว่ารูปภาพแสดงตรงกลาง div โดยตั้งค่าสีพื้นหลังเป็น 'สีน้ำเงิน'
การใช้โมดูลเค้าโครงมุมมองกริด
เลย์เอาต์มุมมองกริดมี 12 คอลัมน์ และความกว้างทั้งหมดถูกกำหนดเป็น 100% และวางแต่ละองค์ประกอบในตำแหน่งเฉพาะบนหน้าเว็บ:
.ราก {จอแสดงผล: ตาราง;
รายการสถานที่: ศูนย์;
}
ในข้อมูลโค้ดข้างต้น ค่า 'ตาราง' ถูกกำหนดให้กับคุณสมบัติการแสดงผล ในขณะที่ 'รายการสถานที่' ใช้เป็นชวเลขสำหรับคุณสมบัติ 'ปรับเนื้อหาให้เหมาะสม' และ 'จัดเรียงรายการ':
เอาต์พุตตรวจสอบว่ารูปภาพอยู่ตรงกลางของ div โดยใช้วิธีกริด:
การใช้แอตทริบิวต์ตำแหน่ง
โดยการตั้งค่าตำแหน่งของคลาสรูทเป็นค่าสัมพัทธ์และคลาสอิมเมจเป็นค่าสัมบูรณ์ รูปภาพสามารถแสดงที่กึ่งกลางของ div:
.ราก {ตำแหน่ง: ญาติ;
}
.ภาพ {
ความกว้าง : 700px;
ความสูง : 500px;
ตำแหน่ง: แน่นอน;
ซ้าย: ห้าสิบ %;
แปลงร่าง: translateX ( - ห้าสิบ % ) ;
}
รูปภาพถูกย้ายไปทางซ้ายของ “50%” แล้วเปลี่ยนกลับเป็น “-50%” ที่แกน X จะแสดงภาพที่กึ่งกลางของ div ในแนวนอน:
นั่นคือวิธีจัดภาพให้อยู่กึ่งกลาง div ในแนวนอน
บทสรุป
หากต้องการตั้งค่ารูปภาพในองค์ประกอบ div ในแนวนอน ให้ใช้ปุ่ม ' ขอบ ”, “ โมดูลเฟล็กซ์ ”, “ เค้าโครงกริด ' และ ' ตำแหน่ง ' คุณสมบัติ. “ ขอบ ” คุณสมบัติของซ้ายและขวาถูกตั้งค่าเป็นอัตโนมัติ “โมดูล Flex” และ “Grid Layout” ตั้งค่าการแสดงผลเป็น Flex และ Grid ตามลำดับ และใช้ “ วางรายการ “ คุณสมบัติเพื่อจัดกึ่งกลางภาพ คุณสมบัติตำแหน่งตั้งค่าสัมพัทธ์กับคลาสรูทและสัมบูรณ์กับคลาสรูปภาพ และใช้คุณสมบัติ 'ซ้าย' และ 'แปลง' บล็อกนี้ได้สาธิตวิธีการจัดกึ่งกลางรูปภาพใน div แนวนอนเรียบร้อยแล้ว