Tip
CSS: vertical-align
โดยการจัดตำแหน่งข้อความให้อยู่ในแนวตั้งนั้นระหว่างรูปภาพหรือวัตถุอื่นนั้นโดยสามารถทำได้โดยการใช้เทคนิค vertical-align วันนี้ผมก็จะแนะนำการใช้ vertical-align โดยมีทั้งหมด 10 ประเภทดังนี้
1.middle เป็นการจัดข้อความให้อยู่กึ่งกลางของวัตถุนั้นๆ โดยจะยกตัวอย่างการใช้ middle ดังนี้
**โค้ด vertical-align : middle;
HTML**
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : middle; CSS **
ผลลัพธ์ของการใช้ vertical-align : middle ดังนี้
- 01.jpg (15.89 KiB) Viewed 2544 times
2.Top เป็นการจัดข้อความให้ติดอยู่ขอบด้านบนของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Top ดังนี้
**โค้ด vertical-align : Top; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Top; CSS **
ผลลัพธ์ของการใช้ vertical-align : Top ดังนี้
- 02.jpg (18.13 KiB) Viewed 2544 times
3.Bottom เป็นจัดข้อความให้ติดอยู่ขอบด้านล่างของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Bottom ดังนี้
**โค้ด vertical-align : Bottom ; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Bottom; CSS **
ผลลัพธ์ของการใช้ vertical-align : Bottom ดังนี้
- 03.jpg (17.08 KiB) Viewed 2544 times
4.Sub เป็นการจัดข้อความให้แบบตัวห้อยของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Sub
**โค้ด vertical-align : Sub; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Sub; CSS **
ผลลัพธ์ของการใช้ vertical-align : Sub ดังนี้
- 04.jpg (16.24 KiB) Viewed 2544 times
5.Super เป็นการจัดข้อความให้แบบตัวยกของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Super ดังนี้
**โค้ด vertical-align : Super; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Super; CSS **
ผลลัพธ์ของการใช้ vertical-align : Super ดังนี้
- 05.jpg (18.07 KiB) Viewed 2544 times
6.Text Top เป็นการจัดข้อความให้อยู่ด้านบนของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-top ดังนี้
**โค้ด vertical-align : text-top; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : text-top; CSS **
ผลลัพธ์ของการใช้ vertical-align : text-top;ดังนี้
- 06.jpg (18.56 KiB) Viewed 2544 times
7.Text-Bottom เป็นการตำแหน่งข้อความให้อยู่ด้านล่างของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-bottom ดังนี้
**โค้ด vertical-align : text-bottom; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : text-bottom; CSS **
ผลลัพธ์ของการใช้ vertical-align : text-bottom;ดังนี้
- 07.jpg (18.29 KiB) Viewed 2544 times
8.Baseline เป็นการจัดตำแหน่งข้อความกำหนดเป็นค่าเริ่มต้นปกติ โดยเราจะยกตัวอย่างการใช้ Baseline ดังนี้
**โค้ด vertical-align : Baseline; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Baseline; CSS **
ผลลัพธ์ของการใช้ vertical-align : Baseline;ดังนี้
- 08.jpg (17.73 KiB) Viewed 2544 times
9.length เป็นการจัดตำแหน่งข้อความกำหนดโดยความยาวต่างๆ เช่น px,em,ฯลฯ โดยจะยกตัวอย่างการใช้ length จะกำหนดเป็น px = 50px; ดังนี้
**โค้ด vertical-align : length; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : length; CSS **
ผลลัพธ์ของการใช้ vertical-align : length;ดังนี้
- 09.jpg (12.34 KiB) Viewed 2544 times
10.percent เป็นกาจัดตำแหน่งข้อความโดยการกำหนดเป็นเปอร์เซ็น เช่น -500%,25% โดยจะยกตัวอย่างการใช้ percent จะกำหนดเป็น -500% ดังนี้
**โค้ด vertical-align : percent; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : percent; CSS **
ผลลัพธ์ของการใช้ vertical-align : percent ;ดังนี้
- 10.jpg (16.55 KiB) Viewed 2544 times
บทความที่เกียวกับการเรียน CSS เพิ่มเติ่ม ได้ที่
LINK
Tip [url=https://www.mindphp.com/forums/viewtopic.php?t=11792]CSS[/url]: vertical-align
โดยการจัดตำแหน่งข้อความให้อยู่ในแนวตั้งนั้นระหว่างรูปภาพหรือวัตถุอื่นนั้นโดยสามารถทำได้โดยการใช้เทคนิค vertical-align วันนี้ผมก็จะแนะนำการใช้ vertical-align โดยมีทั้งหมด 10 ประเภทดังนี้
1.middle เป็นการจัดข้อความให้อยู่กึ่งกลางของวัตถุนั้นๆ โดยจะยกตัวอย่างการใช้ middle ดังนี้
**โค้ด vertical-align : middle; [url=https://www.google.co.th/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&uact=8&ved=0ahUKEwjdwO62ko7QAhUINo8KHWSWDMMQFgg7MAQ&url=http%3A%2F%2Fwww.mindphp.com%2F%25E0%25B8%259A%25E0%25B8%2597%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25B5%25E0%25B8%25A2%25E0%25B8%2599%25E0%25B8%25AD%25E0%25B8%25AD%25E0%25B8%2599%25E0%25B9%2584%25E0%25B8%25A5%25E0%25B8%2599%25E0%25B9%258C%2F7-%25E0%25B8%259A%25E0%25B8%2597%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25B5%25E0%25B8%25A2%25E0%25B8%2599-html%2F2452-%25E0%25B8%259A%25E0%25B8%2597%25E0%25B8%2597%25E0%25B8%25B5-9-html-element.html&usg=AFQjCNF_1k3EvLBvtIs1y6nX22szYGRRQA&sig2=hgOmRYMqi-5HH8ti0jumZg&bvm=bv.137901846,d.c2I]HTML[/url]**
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : middle; CSS **
[code]img {
vertical-align: middle;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : middle ดังนี้
[attachment=9]01.jpg[/attachment]
2.Top เป็นการจัดข้อความให้ติดอยู่ขอบด้านบนของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Top ดังนี้
**โค้ด vertical-align : Top; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : Top; CSS **
[code]img {
vertical-align: top;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : Top ดังนี้
[attachment=8]02.jpg[/attachment]
3.Bottom เป็นจัดข้อความให้ติดอยู่ขอบด้านล่างของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Bottom ดังนี้
**โค้ด vertical-align : Bottom ; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : Bottom; CSS **
[code]img {
vertical-align: Bottom;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : Bottom ดังนี้
[attachment=7]03.jpg[/attachment]
4.Sub เป็นการจัดข้อความให้แบบตัวห้อยของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Sub
**โค้ด vertical-align : Sub; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : Sub; CSS **
[code]img {
vertical-align: Sub;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : Sub ดังนี้
[attachment=6]04.jpg[/attachment]
5.Super เป็นการจัดข้อความให้แบบตัวยกของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Super ดังนี้
**โค้ด vertical-align : Super; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : Super; CSS **
[code]img {
vertical-align: Super;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : Super ดังนี้
[attachment=5]05.jpg[/attachment]
6.Text Top เป็นการจัดข้อความให้อยู่ด้านบนของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-top ดังนี้
**โค้ด vertical-align : text-top; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : text-top; CSS **
[code]img {
vertical-align: text-top;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : text-top;ดังนี้
[attachment=4]06.jpg[/attachment]
7.Text-Bottom เป็นการตำแหน่งข้อความให้อยู่ด้านล่างของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-bottom ดังนี้
**โค้ด vertical-align : text-bottom; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : text-bottom; CSS **
[code]img {
vertical-align: text-bottom;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : text-bottom;ดังนี้
[attachment=3]07.jpg[/attachment]
8.Baseline เป็นการจัดตำแหน่งข้อความกำหนดเป็นค่าเริ่มต้นปกติ โดยเราจะยกตัวอย่างการใช้ Baseline ดังนี้
**โค้ด vertical-align : Baseline; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : Baseline; CSS **
[code]img {
vertical-align: Baseline;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : Baseline;ดังนี้
[attachment=2]08.jpg[/attachment]
9.length เป็นการจัดตำแหน่งข้อความกำหนดโดยความยาวต่างๆ เช่น px,em,ฯลฯ โดยจะยกตัวอย่างการใช้ length จะกำหนดเป็น px = 50px; ดังนี้
**โค้ด vertical-align : length; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : length; CSS **
[code]img {
vertical-align: 50px;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : length;ดังนี้
[attachment=1]09.jpg[/attachment]
10.percent เป็นกาจัดตำแหน่งข้อความโดยการกำหนดเป็นเปอร์เซ็น เช่น -500%,25% โดยจะยกตัวอย่างการใช้ percent จะกำหนดเป็น -500% ดังนี้
**โค้ด vertical-align : percent; HTML **
[code]
<p>An
<img src="http://placekitten.com/200/150">
</p>[/code]
**โค้ด vertical-align : percent; CSS **
[code]img {
vertical-align: -500%;
}[/code]
ผลลัพธ์ของการใช้ vertical-align : percent ;ดังนี้
[attachment=0]10.jpg[/attachment]
บทความที่เกียวกับการเรียน CSS เพิ่มเติ่ม ได้ที่ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]LINK[/url]