CSS จัดตําแหน่งรูปภาพ ตรงกลาง ชิดขวา ชิดซ้าย

สอนภาษา CSS จัดตําแหน่งรูปภาพให้อยู่ ตรงกลาง ชิดขวา หรือชิดซ้ายของเว็บไซต์ โดยแนะนำให้ใช้คำสั่ง text-align ซึ่งสามารถจัดตำแหน่งรูปภาพได้ตามตำแหน่งที่ต้องการ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS จัดตําแหน่งรูปภาพ ตรงกลาง ชิดขวา ชิดซ้าย

<style>
    .center {
        text-align: center;
    }
    .right {
        text-align: right;
    }
    .left {
        text-align: left;
    }
    .div {
        width: 100%;
    }
</style>

<div class="div center"><img src="https://www.devdit.com/favicon-16x16.png"></div>
<div class="div right"><img src="https://www.devdit.com/favicon-16x16.png"></div>
<div class="div left"><img src="https://www.devdit.com/favicon-16x16.png"></div>

1. ใช้ text-align: center สำหรับจัดตำแหน่งรูปภาพไว้กึ่งกลาง

2. ใช้ text-align: right สำหรับจัดตำแหน่งรูปภาพไว้ชิดขวา

3. ใช้ text-align: left สำหรับจัดตำแหน่งรูปภาพไว้ชิดซ้าย

4. กำหนด div ที่คลุมแท็ก img ให้ความกว้าง (width) เป็น 100%