Tip CSS : vertical-align

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pnut
PHP Super Member
PHP Super Member
โพสต์: 488
ลงทะเบียนเมื่อ: 08/08/2016 10:48 am

Tip CSS : vertical-align

โพสต์โดย pnut » 04/11/2016 10:20 am

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 **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: middle;
}

ผลลัพธ์ของการใช้ vertical-align : middle ดังนี้
01.jpg
01.jpg (15.89 KiB) เปิดดู 54 ครั้ง

2.Top เป็นการจัดข้อความให้ติดอยู่ขอบด้านบนของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Top ดังนี้
**โค้ด vertical-align : Top; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : Top; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: top;
}

ผลลัพธ์ของการใช้ vertical-align : Top ดังนี้
02.jpg
02.jpg (18.13 KiB) เปิดดู 54 ครั้ง

3.Bottom เป็นจัดข้อความให้ติดอยู่ขอบด้านล่างของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Bottom ดังนี้
**โค้ด vertical-align : Bottom ; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : Bottom; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: Bottom;
}

ผลลัพธ์ของการใช้ vertical-align : Bottom ดังนี้
03.jpg
03.jpg (17.08 KiB) เปิดดู 54 ครั้ง

4.Sub เป็นการจัดข้อความให้แบบตัวห้อยของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Sub
**โค้ด vertical-align : Sub; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : Sub; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: Sub;
}

ผลลัพธ์ของการใช้ vertical-align : Sub ดังนี้
04.jpg
04.jpg (16.24 KiB) เปิดดู 54 ครั้ง

5.Super เป็นการจัดข้อความให้แบบตัวยกของวัตถุนั้น โดยจะยกตัวอย่างการใช้ Super ดังนี้
**โค้ด vertical-align : Super; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : Super; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: Super;
}

ผลลัพธ์ของการใช้ vertical-align : Super ดังนี้
05.jpg
05.jpg (18.07 KiB) เปิดดู 54 ครั้ง

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 **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: text-top;
}

ผลลัพธ์ของการใช้ vertical-align : text-top;ดังนี้
06.jpg
06.jpg (18.56 KiB) เปิดดู 54 ครั้ง

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 **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: text-bottom;
}

ผลลัพธ์ของการใช้ vertical-align : text-bottom;ดังนี้
07.jpg
07.jpg (18.29 KiB) เปิดดู 54 ครั้ง

8.Baseline เป็นการจัดตำแหน่งข้อความกำหนดเป็นค่าเริ่มต้นปกติ โดยเราจะยกตัวอย่างการใช้ Baseline ดังนี้
**โค้ด vertical-align : Baseline; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : Baseline; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: Baseline;
}

ผลลัพธ์ของการใช้ vertical-align : Baseline;ดังนี้
08.jpg
08.jpg (17.73 KiB) เปิดดู 54 ครั้ง

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 **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: 50px;
}

ผลลัพธ์ของการใช้ vertical-align : length;ดังนี้
09.jpg
09.jpg (12.34 KiB) เปิดดู 54 ครั้ง

10.percent เป็นกาจัดตำแหน่งข้อความโดยการกำหนดเป็นเปอร์เซ็น เช่น -500%,25% โดยจะยกตัวอย่างการใช้ percent จะกำหนดเป็น -500% ดังนี้
**โค้ด vertical-align : percent; HTML **

โค้ด: เลือกทั้งหมด

<p>An
<img src="http://placekitten.com/200/150">
</p>

**โค้ด vertical-align : percent; CSS **

โค้ด: เลือกทั้งหมด

img {
  vertical-align: -500%;
}

ผลลัพธ์ของการใช้ vertical-align : percent ;ดังนี้
10.jpg
10.jpg (16.55 KiB) เปิดดู 54 ครั้ง


บทความที่เกียวกับการเรียน CSS เพิ่มเติ่ม ได้ที่ LINK

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน