เทคนิคจัดวางไอคอนและข้อความใน Tailwind CSS ให้ตรงกันเป๊ะ

นักพัฒนาเว็บหลายคนคงเคยปวดหัวกับปัญหาไอคอนเวกเตอร์ที่วางคู่กับข้อความแล้วไม่ยอมจัดแนวเดียวกันตามค่าเริ่มต้นของเบราว์เซอร์ เนื่องจากไอคอนที่เป็นกราฟิกไม่มีเส้นฐานหรือ Baseline เหมือนกับตัวหนังสือ ทำให้รูปทรงของไอคอนลอยสูงหรือต่ำกว่าระดับตัวอักษรอย่างเห็นได้ชัด

บทความนี้ได้แนะนำแนวทางการแก้ปัญหาการจัดวางภาพไอคอนแผนที่จากไลบรารี GeoIcons ร่วมกับเฟรมเวิร์ก Tailwind CSS เพื่อให้ไอคอนและป้ายข้อความแสดงผลได้อย่างสวยงามลงตัว โดยมีเทคนิคหลักๆ ที่ต้องนำไปประยุกต์ใช้ดังนี้

• ใช้คอมโพเนนต์คอนเทนเนอร์กำหนดค่า Flexbox เพื่อจัดระเบียบองค์ประกอบไอคอนและกลุ่มข้อความให้อยู่ในแนวเดียวกัน
• ปรับความสูงของไอคอนให้สอดคล้องกับระยะความสูงของบรรทัด หรือ Line-height แทนที่จะปรับตามขนาดฟอนต์ เพื่อป้องกันความเหลื่อมล้ำในแนวตั้ง
• ใช้คลาส Relative Translation เพื่อขยับตำแหน่งชดเชยความสมดุลของภาพไอคอนที่มีสัดส่วนแตกต่างกัน เช่น ประเทศรูปทรงยาวรีอย่างอิตาลีกับประเทศรูปทรงกะทัดรัดอย่างฝรั่งเศส

สำหรับการนำไปใช้งานจริงในส่วนประกอบต่างๆ มีรูปแบบที่น่าสนใจดังนี้ ปุ่มกดให้ใช้คุณสมบัติ inline-flex items-center และปรับขนาดไอคอนให้เล็กกว่าตัวหนังสือเล็กน้อย ส่วนการแสดงผลแบบรายการต้องกำหนดขนาดไอคอนให้เท่ากันทุกแถวเพื่อป้องกันความเหลื่อมล้ำ ขณะที่ช่องกรอกข้อมูลประเทศให้วางไอคอนด้วยการกำหนดตำแหน่งแบบ Absolute พร้อมปรับกึ่งกลางด้วยคำสั่ง top-1/2 และ -translate-y-1/2 นอกจากนี้ หากต้องการแทรกไอคอนไว้ในประโยคข้อความทั่วไป สามารถใช้หน่วย em กำหนดความกว้างและความสูงเพื่อให้ปรับขนาดตามตัวอักษรโดยอัตโนมัติ

ที่มา: Dev.to