ตัวอย่างการสร้างแอนิเมชันเปลี่ยน vertical-align ของรูปภาพภายในบรรทัดข้อความ
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
img {
vertical-align: 80px;
animation: myanim 3s;
}
@keyframes myanim {
50% {
vertical-align: 120px;
}
}
</style>
</head>
<body>
<h1>CSS vertical-align property</h1>
<div></div>
<p>
<img src="https://www.tutorialspoint.com/latest/microservice_architecture.png" width="80" height="80">
This is demo text. This is demo text. This is demo text. This is demo text.
</p>
</body>
</html>
คำอธิบาย: รูปภาพเริ่มต้น vertical-align 80px (ต่ำกว่า baseline) ที่ 50% จะเลื่อนลงอีกเป็น 120px แล้วจบ (ไม่ infinite)
ค่าของ vertical-align:
- Baseline-relative:
baseline(default),sub,super,text-top,text-bottom,middle,<length>,<percentage> - Line-relative (ใน table cells / flex/grid items):
top,bottom,center
ข้อสังเกต: vertical-align ทำงานกับ inline/inline-block/table-cell elements เท่านั้น ไม่ทำงานกับ block-level elements การ animate vertical-align เป็น discrete (ถ้าใช้ keyword) หรือ continuous (ถ้าใช้ length) แต่ไม่ค่อยใช้ animate คุณสมบัตินี้โดยตรง มักใช้ transform: translateY() แทน
