CSS - การใช้ Vertical-align

แน่นอน! บทความนี้เราจะพูดถึงการใช้ `vertical-align` ใน CSS ซึ่งเป็นคุณสมบัติที่มักใช้ในการจัดตำแหน่งแนวตั้งขององค์ประกอบต่าง ๆ ในหน้าเว็บ การใช้ `vertical-align` อย่างถูกต้องและมีประสิทธิภาพนั้นสามารถเพิ่มความน่าสนใจและความสวยงามให้กับเว็บไซต์ได้อย่างมาก

ความเข้าใจพื้นฐานเกี่ยวกับ Vertical-align

`vertical-align` เป็นพร็อพเพอร์ตี้ใน CSS ที่ใช้จัดตำแหน่งแนวตั้งขององค์ประกอบ โดยปกติแล้วจะใช้กับองค์ประกอบ inline เช่น ข้อความ หรือภาพที่ใส่อยู่ภายในบรรทัดเดียวกัน แต่สามารถนำมาปรับประยุกต์ใช้กับ table cells ได้เช่นกัน ซึ่งมีค่าที่สามารถกำหนดได้หลายรูปแบบ เช่น `baseline`, `sub`, `super`, `top`, `text-top`, `middle`, `bottom`, `text-bottom` และอาจใช้ค่าที่เป็นเปอร์เซนต์หรือค่าคงที่เชิงลบหรือบวกได้เช่นกัน

การใช้งานในองค์ประกอบ inline

การใช้งาน `vertical-align` กับองค์ประกอบ inline เช่น `<img>` ในการจัดตำแหน่งภาพให้สอดคล้องกับตัวอักษรสามารถทำได้ง่ายมาก ตัวอย่างเช่น:

<p>
  This is an image: <img src="example.jpg" alt="Example Image" style="vertical-align: middle;">
  aligned to the middle of the text.
</p>

ในตัวอย่างนี้ เราใช้ `vertical-align: middle;` กับภาพเพื่อให้ภาพถูกจัดตรงกลางระหว่างบรรทัดของตัวอักษร

การใช้งานกับ Table Cells

`vertical-align` มักถูกใช้เพื่อจัดตำแหน่งของเนื้อหาในเซลล์ตารางเช่นกัน ตัวอย่างเช่น:

<table border="1">
  <tr>
    <td style="height:100px; vertical-align: top;">Top</td>
    <td style="height:100px; vertical-align: middle;">Middle</td>
    <td style="height:100px; vertical-align: bottom;">Bottom</td>
  </tr>
</table>

ในโค้ดนี้ เรามีเซลล์สามเซลล์ที่มีการจัดตำแหน่งต่างกันคือ ด้านบน, ตรงกลาง, และด้านล่าง

ข้อสังเกตในการใช้ Vertical-align

ตัวอย่าง Use Case: การสร้างการ์ดข้อมูล

สมมุติว่าคุณต้องการสร้างการ์ดข้อมูลที่มีภาพและคำบรรยายจัดให้อยู่ตรงกลางภายในกรอบ เราสามารถใช้ `vertical-align` ดังนี้:

<style>
  .card {
    width: 200px;
    height: 300px;
    border: 1px solid #ccc;
    display: table;
  }
  .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>

<div class="card">
  <div class="content">
    <img src="avatar.png" alt="Avatar" style="width: 100px; height: 100px;"><br>
    John Doe
  </div>
</div>

ในตัวอย่างนี้ การ์ดที่สร้างขึ้นจะมีภาพและชื่อจัดอยู่ตรงกลาง แม้ว่า `vertical-align` เองจะทำงานใน context ที่จำกัด แต่เมื่อใช้ร่วมกับ display แบบ table-cell เราสามารถควบคุมการจัดตำแหน่งแนวตั้งได้ดี

การใช้ `vertical-align` มีความสำคัญในหลาย ๆ เคสที่ไม่ควรมองข้าม โดยเฉพาะในงานที่เกี่ยวกับการจัดตำแหน่งของเนื้อหาที่เป็นข้อความหรือภาพที่ต้องการความสมดุลและความสวยงาม ไม่ว่าจะเป็นนักพัฒนามือใหม่หรือนักพัฒนาที่มีประสบการณ์มากมาย การเข้าใจคุณสมบัตินี้ย่อมช่วยให้เว็บไซต์ของคุณดูดีขึ้น

ถ้าคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ CSS และการพัฒนาเว็บในเชิงลึก เราขอแนะนำให้พิจารณาเรียนรู้เพิ่มเติมที่สถาบัน EPT (Expert-Programming-Tutor) ที่เน้นสอนการเขียนโปรแกรมและพัฒนาเว็บด้วยหลากหลายรูปแบบ และเทคนิคที่สอดคล้องกับความต้องการในตลาดงานปัจจุบัน

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/