تتضمن المشاريع الأخيرة إنتاج أشكال عديدة، خاصة مربعات الاختيار وأجهزة الراديو. ومع ذلك، أثناء عملية تطوير الواجهة الأمامية، تم اكتشاف أنه لا يمكن محاذاة خانات الاختيار الفردية (المتعددة) والنص الموجه خلفها دون أي إعدادات، وهناك فرق كبير بين Firefox وIE. حتى لو تم ضبط Vertical-align:middle، فإنها لا تزال غير محاذية تمامًا. كما هو موضح أدناه:
لذلك قمت بفحص بعض المواقع على الإنترنت ووجدت أن هذه المشكلة شائعة كما هو موضح أدناه (FF3.5):
في العديد من صفحات مواقع الويب التي تتضمن نماذج، توجد مشكلة تتمثل في عدم إمكانية محاذاة عناصر النموذج والنص المطالبة. لذلك قررت دراسة هذه القضية. في البداية، قمت بالبحث عن مقالة أحد كبار العاملين في شركة ويتلي بعنوان " كل شخص لديه آراء مختلفة حول المحاذاة العمودية ". ذكر ويتلي في مقالته النقاط الرئيسية التالية حول التمركز العمودي:
1. عند استخدام المحاذاة العمودية: الوسط، تتم محاذاة مركز العنصر مع مركز العناصر المحيطة.
2. تعريف "المركز" هنا هو: الصورة بالطبع نصف ارتفاعها، ويجب تحريك النص لأعلى بمقدار 0.5ex بناءً على خط الأساس، وهو المركز الدقيق للحرف الصغير "x". ومع ذلك، فإن العديد من المتصفحات تحدد الوحدة ex على أنها 0.5em، بحيث لا تكون بالضرورة المركز الدقيق لـ x (إذا كنت لا تفهم مصطلحات مثل خط الأساس، فيرجى قراءة مقالة Wheatlee أولاً)
بعد هذه الفكرة ومقارنة المشكلات التي واجهتها، كان أول شيء فكرت فيه هو التحقق مما إذا كان المتصفح يستخدم نفس القواعد لعرض "مربعات الاختيار" والصور (سواء كان يتعامل مع مربع الاختيار كصورة مربعة). لذلك كتبت الكود التالي:
<نمط>
الجسم {حجم الخط: 12 بكسل؛}
</نمط>
<أسلوب الإدخال = "vertical-align:middle؛" name = "test" type = "checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
نص الاختبار
testpic.gif الموجود في الكود عبارة عن صورة سوداء بنفس حجم خانة الاختيار. العرض تحت FF3.5 هو كما يلي:
