การจัดตำแหน่งภาพในบรรทัด

เราสามารถนำเอา align attribute เข้ามาจัดตำแหน่งของ รูปภาพที่สัมพันธ์กับตัวอักษรได้ โดยคุณสามารถจัดตำแหน่งของรูปที่อยู่ในบรรทัดเดียวกันกับตัวอักษรได้เพื่อให้สามารถสร้างความแตกต่างในการจัดตำแหน่งของรูปได้

<p> หากคุณกำลังมองหา host<img src=”arrow.gif” align=”top” alt=”mini icon”/>
สำหรับเว็บของคุณ</p>

<p>mindwebhost.com เป็นตัวเลือกสำหรับคุณแล้วบริการอย่างมั่นคงมาตั้งแต่
<img src=”arrow.gif” align=”middle” alt=”mini icon”/> </p>

<p>ปี 2549จนถึงปัจจุบันเน้นคุณภาพไม่ใช่ปริมาณ
<img src=”arrow.gif” align=”bottom” alt=”mini icon”/>? มั่นใจได้ในคุณภาพ</p>
สิ่งเพิ่มเติมที่ 5.15 โค้ดที่มีการจัดเรียงรูปทั้งสามแบบ เพื่อให้เห็นถึงความแตกต่างในการจัดเรียงแต่ละแบบ

การจัดเรียงรูปในบรรทัด
สิ่งเพิ่มเติมที่ 5.16 ผลที่ได้จากโค้ด 5.15 จะเห็นได้ว่ามีรูปแบบการจัดเรียงในบรรทัดที่แตกต่างกันในแต่ละแบบที่กำหนด

การจัดเรียงรูปภาพ ในบรรทัดของตัวหนังสือ
1.พิมพ์ <img src=”image.location” โดยที่ image.location คือตำแหน่งที่เก็บรูปบน server
2.พิมพ์ align=”direction” เพื่อบอกตำแหน่งของรูป โดยจะมี top, middle, bottom
3.เพิ่ม attribute อื่นๆของ img ได้ตามที่เราต้องการ จากนั้นก็ปิดด้วย />
4.พิมพ์ ตัวหนังสือในบรรทัดเดียวกับรูปภาพตามที่เราต้องการ

เพิ่มเติม

- align attribute เป็น attribute ที่ไม่ถูกต้องตามมาตรฐาน โดยที่ W3C เค้าให้เราจัดรูปด้วย style sheet ซะมากกว่า
- firefox และ internet explorer แสดงผล middle ที่ไม่เหมือนกัน โดยที่ Firefox จะจัดรูปให้อยู่กลางของตัวอักษร แต่ว่า internet explorer จะจัดให้อยู่กลางของรูปอื่นๆด้วย ที่อยู่ในบรรทัดเดียวกัน

No comments yet.
You must be logged in to post a comment.