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