เขียน CSS 时 อาจต้องการเปลี่ยนการจัดแนวตั้งของ元素 คุณสมบัติ vertical-align และค่า property values ต่างๆ จะช่วยแก้ไขได้
ไวยากรณ์
vertical-align: property-value;
ค่าที่เป็นไปได้: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, inherit
คำอธิบายแต่ละค่า
- baseline (default): จัดแนวกับ baseline ของ parent element
- length: ยก/ดัน元素 ตามความยาวที่ระบุ (cm, px, em) ค่าบวก = ยกขึ้น, ค่าลบ = ดันลง ใช้ % ได้เช่นกัน
- sub: จัดแนวกับ subscript baseline ของ parent (ต่ำกว่าปกติ)
- super: จัดแนวกับ superscript baseline ของ parent (สูงกว่าปกติ)
- top: จัดแนวกับยอดของ元素สูงสุดในบรรทัด
- text-top: จัดแนวกับยอดของข้อความใน parent element
- middle: จัดแนวกึ่งกลางของ parent element
- bottom: จัดแนวกับ元素ต่ำสุดในบรรทัด
- text-bottom: จัดแนวกับด้านล่างของข้อความใน parent element
- initial: คืนค่าเริ่มต้น
- inherit: สืบทอดค่าจาก parent element
สรุป
vertical-align ควบคุมการจัดแนวตั้งของ元素 inline/inline-block/table-cell มี 11 ค่า ครอบคลุม baseline, length, sub/super, top/middle/bottom, text-top/text-bottom, initial/inherit — เลือกใช้ตามบริบท
