HTML จัดตําแหน่ง div วางตำแหน่ง div

HTML จัดตําแหน่ง div บทความนี้สอนจัดตำแหน่ง div ด้วยคำสั่ง text-align กำหนด 3 ค่าคือ ตรงกลาง (center) ทางซ้าย (left) และทางขวา (right) โดยกำหนดผ่าน attribute style สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML จัดตําแหน่ง div วางตำแหน่ง div

<div style="width:100%; text-align:center;border: solid 1px red; margin-bottom: 1px;">
    <div>ตรงกลาง</div>
</div>

<div style="width:100%; text-align:right; border: solid 1px green; margin-bottom: 1px;">
    <div>ชิดขวา</div>
</div>

<div style="width:100%; text-align:left; border: solid 1px blue;">
    <div>ชิดซ้าย</div>
</div>

HTML จัดตําแหน่ง div จากตัวอย่างสร้าง div ใหญ่คลุม div ที่ต้องการจัดตำแหน่ง พร้อมกำหนด width: 100% คือความกว้างเต็มหน้าจอ และกำหนด text-align พร้อมค่าข้อมูลดังนี้

1. center คือ จัดตำแหน่ง div ให้อยู่ตรงกลาง

2. left คือ จัดตำแหน่ง div ให้อยู่ทางซ้าย

3. right คือ จัดตำแหน่ง div ให้อยู่ทางขวา