การจัดตำแหน่งรูปภาพ
|
รูปแบบคำสั่ง :
<img src="ชื่อรูปภาพ.นามสกุลภาพ" align ="ตำแหน่ง"> |
คำอธิบาย : align=left หรือ
center หรือ Right หรือ top หรือ bottom :
เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ
ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น
จัดรูปให้อยู่ด้านขวา <img src="surat.jpg"
align=right> |
ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ |
การแสดงผล
|
คำสั่งที่ใช้กำหนดตำแหน่งข้อความและรูปภาพ |
ตำแหน่งที่แสดงผลข้อความและรูปภาพ |
1.
แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ |
ALIGN =
"LEFT" |
ตำแหน่งซ้ายของจอภาพ |
ALIGN =
"RIGHT" |
ตำแหน่งขวาของจอภาพ |
2.
แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ |
ALIGN =
"TOP","TEXTTOP" |
ตำแหน่งบนสุดของรูปภาพ |
ALIGN =
"MIDDLE","ABSMIDDLE" |
ตำแหน่งกึ่งกลางของรูปภาพ |
ALIGN =
"BOTTOM","BASELINE","ABSBOTTOM" |
ตำแหน่งล่างสุดของรูปภาพ |
|
|
ตัวอย่างโปรแกรม |
<HTML>
<HEAD>
<TITLE>
การจัดตำแหน่งภาพ</TITLE>
</HEAD>
<BODY
bgcolor=white> |
|
<p align="left"><img src="computer.jpg" width="200" height="200" align="top">ภาพชิดซ้าย ข้อความนี้อยู่ขอบบนของรูปภาพ</p>
<p>
<hr>
<div align="center"><img src="computer.jpg" width="200" height="200" align="middle">
ภาพอยู่กึ่งกลาง และข้อความอยู่ตรงกลางของรูปภาพ</div>
<hr>
<p><img src="computer.jpg" width="200" height="200" align="bottom">ภาพชิดซ้าย ข้อความอยู่ขอบล่างของรูปภาพ <p>
|
</BODY>
</HTML>
|
ผลลัพธ์ |
ภาพชิดซ้าย ข้อความนี้อยู่ขอบบนของรูปภาพ

ภาพอยู่กึ่งกลาง และข้อความอยู่ตรงกลางของรูปภาพ
ภาพชิดซ้าย ข้อความอยู่ขอบล่างของรูปภาพ
|
|