โครงการล่าสุดเกี่ยวข้องกับการผลิตแบบฟอร์มจำนวนมากโดยเฉพาะช่องทำเครื่องหมายและกล่องวิทยุ อย่างไรก็ตามในระหว่างกระบวนการพัฒนาส่วนหน้าพบว่ากล่องกาเครื่องหมาย (คอมเพล็กซ์) เดี่ยวและข้อความแจ้งที่อยู่เบื้องหลังพวกเขาไม่สามารถจัดตำแหน่งได้หากไม่มีการตั้งค่าใด ๆ และมีความแตกต่างอย่างมากระหว่าง Firefox และ IE แม้ว่าจะเป็นแนวตั้ง: ตรงกลางถูกตั้งค่า แต่ก็ยังไม่สามารถจัดตำแหน่งได้อย่างสมบูรณ์แบบ ดังที่แสดงในรูปด้านล่าง:
ดังนั้นฉันตรวจสอบเว็บไซต์บางแห่งทางออนไลน์และพบว่าปัญหานี้เป็นเรื่องปกติดังที่แสดงในรูปด้านล่าง (FF3.5):
ในหลาย ๆ เว็บไซต์มีปัญหาที่องค์ประกอบแบบฟอร์มไม่สามารถจัดแนวกับข้อความแจ้ง ดังนั้นฉันวางแผนที่จะศึกษาปัญหานี้ ก่อนอื่นฉันค้นหาบทความ "ทุกคนบอกว่าทุกคนจะจัดแนวแนวตั้ง" โดยวีตลีอาวุโส ในบทความของเขา Wheatlee กล่าวถึงประเด็นสำคัญหลายประการเกี่ยวกับการจัดกึ่งกลางแนวตั้ง:
1. เมื่อแนวตั้งแนว: ตรงกลางจุดศูนย์กลางขององค์ประกอบจะอยู่ในแนวเดียวกันกับศูนย์กลางขององค์ประกอบโดยรอบ
2. คำจำกัดความของศูนย์กลางที่นี่คือ: ภาพแน่นอนครึ่งหนึ่งของความสูงและข้อความควรถูกเลื่อนขึ้น 0.5EX ขึ้นอยู่กับพื้นฐานนั่นคือศูนย์กลางของตัวอักษรตัวพิมพ์เล็ก x อย่างไรก็ตามเบราว์เซอร์จำนวนมากมักจะกำหนดหน่วยของ EX เป็น 0.5em ดังนั้นจึงไม่จำเป็นต้องเป็นศูนย์กลางของ X (หากคุณไม่เข้าใจคำนามเช่นพื้นฐานโปรดอ่านบทความของ Wheatlee ก่อน)
ตามความคิดนี้เมื่อเทียบกับปัญหาที่ฉันพบสิ่งแรกที่นึกถึงคือการตรวจสอบว่าเบราว์เซอร์ใช้กฎเดียวกันสำหรับกล่องกาเครื่องหมายและรูปภาพเพื่อแสดงผล (ไม่ว่าคุณจะปฏิบัติต่อกล่องกาเครื่องหมายเป็นภาพสี่เหลี่ยม) ดังนั้นฉันจึงเขียนรหัสต่อไปนี้:
<style>
ร่างกาย {ตัวอักษรขนาด: 12px;}
</style>
<อินพุต style = แนวตั้ง-แนว: กลาง; name = test type = ช่องทำเครื่องหมาย>
<img style = แนวตั้งแนว: กลาง; src = testpic.gif />
ข้อความทดสอบ
testpic.gif ในรหัสเป็นภาพสีดำที่มีขนาดเท่ากันกับกล่องกาเครื่องหมาย ต่อไปนี้จะแสดงภายใต้ FF3.5:
หน้าก่อนหน้า 1 2 3 4 หน้าถัดไปอ่านข้อความเต็ม