Page 1 of 1

Tip CSS : vertical-align

Posted: 04/11/2016 10:20 am
by pnut
Tip CSS: vertical-align
โดยการจัดตำแหน่งข้อความให้อยู่ในแนวตั้งนั้นระหว่างรูปภาพหรือวัตถุอื่นนั้นโดยสามารถทำได้โดยการใช้เทคนิค vertical-align วันนี้ผมก็จะแนะนำการใช้ vertical-align โดยมีทั้งหมด 10 ประเภทดังนี้
1.middle เป็นการจัดข้อความให้อยู่กึ่งกลางของวัตถุนั้นๆ โดยจะยกตัวอย่างการใช้ middle ดังนี้
**โค้ด vertical-align : middle; HTML**

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : middle; CSS **

Code: Select all

img {
  vertical-align: middle;
}
ผลลัพธ์ของการใช้ vertical-align : middle ดังนี้
01.jpg
01.jpg (15.89 KiB) Viewed 540 times
2.Top เป็นการจัดข้อความให้ติดอยู่ขอบด้านบนของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Top ดังนี้
**โค้ด vertical-align : Top; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Top; CSS **

Code: Select all

img {
  vertical-align: top;
}
ผลลัพธ์ของการใช้ vertical-align : Top ดังนี้
02.jpg
02.jpg (18.13 KiB) Viewed 540 times
3.Bottom เป็นจัดข้อความให้ติดอยู่ขอบด้านล่างของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Bottom ดังนี้
**โค้ด vertical-align : Bottom ; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Bottom; CSS **

Code: Select all

img {
  vertical-align: Bottom;
}
ผลลัพธ์ของการใช้ vertical-align : Bottom ดังนี้
03.jpg
03.jpg (17.08 KiB) Viewed 540 times
4.Sub เป็นการจัดข้อความให้แบบตัวห้อยของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Sub
**โค้ด vertical-align : Sub; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Sub; CSS **

Code: Select all

img {
  vertical-align: Sub;
}
ผลลัพธ์ของการใช้ vertical-align : Sub ดังนี้
04.jpg
04.jpg (16.24 KiB) Viewed 540 times
5.Super เป็นการจัดข้อความให้แบบตัวยกของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Super ดังนี้
**โค้ด vertical-align : Super; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Super; CSS **

Code: Select all

img {
  vertical-align: Super;
}
ผลลัพธ์ของการใช้ vertical-align : Super ดังนี้
05.jpg
05.jpg (18.07 KiB) Viewed 540 times
6.Text Top เป็นการจัดข้อความให้อยู่ด้านบนของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-top ดังนี้
**โค้ด vertical-align : text-top; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : text-top; CSS **

Code: Select all

img {
  vertical-align: text-top;
}
ผลลัพธ์ของการใช้ vertical-align : text-top;ดังนี้
06.jpg
06.jpg (18.56 KiB) Viewed 540 times
7.Text-Bottom เป็นการตำแหน่งข้อความให้อยู่ด้านล่างของ Element ขึ้นอยู่กับ Element หลัก โดยจะยกตัวอย่างการใช้ text-bottom ดังนี้
**โค้ด vertical-align : text-bottom; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : text-bottom; CSS **

Code: Select all

img {
  vertical-align: text-bottom;
}
ผลลัพธ์ของการใช้ vertical-align : text-bottom;ดังนี้
07.jpg
07.jpg (18.29 KiB) Viewed 540 times
8.Baseline เป็นการจัดตำแหน่งข้อความกำหนดเป็นค่าเริ่มต้นปกติ โดยเราจะยกตัวอย่างการใช้ Baseline ดังนี้
**โค้ด vertical-align : Baseline; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : Baseline; CSS **

Code: Select all

img {
  vertical-align: Baseline;
}
ผลลัพธ์ของการใช้ vertical-align : Baseline;ดังนี้
08.jpg
08.jpg (17.73 KiB) Viewed 540 times
9.length เป็นการจัดตำแหน่งข้อความกำหนดโดยความยาวต่างๆ เช่น px,em,ฯลฯ โดยจะยกตัวอย่างการใช้ length จะกำหนดเป็น px = 50px; ดังนี้
**โค้ด vertical-align : length; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : length; CSS **

Code: Select all

img {
  vertical-align: 50px;
}
ผลลัพธ์ของการใช้ vertical-align : length;ดังนี้
09.jpg
09.jpg (12.34 KiB) Viewed 540 times
10.percent เป็นกาจัดตำแหน่งข้อความโดยการกำหนดเป็นเปอร์เซ็น เช่น -500%,25% โดยจะยกตัวอย่างการใช้ percent จะกำหนดเป็น -500% ดังนี้
**โค้ด vertical-align : percent; HTML **

Code: Select all

<p>An
<img src="http://placekitten.com/200/150">
</p>
**โค้ด vertical-align : percent; CSS **

Code: Select all

img {
  vertical-align: -500%;
}
ผลลัพธ์ของการใช้ vertical-align : percent ;ดังนี้
10.jpg
10.jpg (16.55 KiB) Viewed 540 times
บทความที่เกียวกับการเรียน CSS เพิ่มเติ่ม ได้ที่ LINK