โดยการจัดตำแหน่งข้อความให้อยู่ในแนวตั้งนั้นระหว่างรูปภาพหรือวัตถุอื่นนั้นโดยสามารถทำได้โดยการใช้เทคนิค vertical-align วันนี้ผมก็จะแนะนำการใช้ vertical-align โดยมีทั้งหมด 10 ประเภทดังนี้
1.middle เป็นการจัดข้อความให้อยู่กึ่งกลางของวัตถุนั้นๆ โดยจะยกตัวอย่างการใช้ middle ดังนี้
**โค้ด vertical-align : middle; HTML**
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: middle;
}
**โค้ด vertical-align : Top; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: top;
}
**โค้ด vertical-align : Bottom ; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: Bottom;
}
**โค้ด vertical-align : Sub; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: Sub;
}
**โค้ด vertical-align : Super; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: Super;
}
**โค้ด vertical-align : text-top; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: text-top;
}
**โค้ด vertical-align : text-bottom; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: text-bottom;
}
**โค้ด vertical-align : Baseline; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: Baseline;
}
**โค้ด vertical-align : length; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: 50px;
}
**โค้ด vertical-align : percent; HTML **
โค้ด: เลือกทั้งหมด
<p>An
<img src="http://placekitten.com/200/150">
</p>
โค้ด: เลือกทั้งหมด
img {
vertical-align: -500%;
}