วิธีการ - ศูนย์รูปภาพ
เรียนรู้วิธีจัดกึ่งกลางรูปภาพด้วย CSS
ภาพตรงกลาง:
วิธีการจัดกึ่งกลางรูปภาพ
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<img src="paris.jpg" alt="Paris" class="center">
ขั้นตอนที่ 2) เพิ่ม CSS:
หากต้องการจัดกึ่งกลางรูปภาพ ให้ตั้งค่าระยะขอบซ้ายและขวาauto
ให้เป็นblock
องค์ประกอบ:
ตัวอย่าง
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
โปรดทราบว่าไม่สามารถจัดกึ่งกลางได้หากตั้งค่าความกว้างเป็น 100% (เต็มความกว้าง)
เคล็ดลับ:ไปที่บทแนะนำรูปภาพ CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบรูปภาพ