تتضمن المشاريع الحديثة الكثير من إنتاج النماذج ، وخاصة مربعات الاختيار وصناديق الراديو. ومع ذلك ، خلال عملية التطوير الأمامية ، تبين أن خانات الاختيار (المعقدة) الفردية والنص السريع خلفها لا يمكن محاذاة دون أي إعدادات ، وكان هناك فرق كبير بين Firefox و IE. حتى لو تم تعيين المحاذاة العمودية: الوسط ، فلا يزال من الممكن محاذاة تمامًا. كما هو مبين في الشكل أدناه:
لذلك راجعت بعض مواقع الويب عبر الإنترنت ووجدت أن هذه المشكلة شائعة ، كما هو موضح في الشكل أدناه (FF3.5):
في العديد من مواقع الويب ، هناك مشكلة لا يمكن محاذاة عناصر النموذج مع النص السريع. لذلك أخطط لدراسة هذه القضية. أولاً ، لقد بحثت عن مقال "الجميع يقول الجميع للمحاذاة العمودية" من قبل القمح الكبير. في مقالته ، ذكر Wheatlee عدة نقاط رئيسية حول التركيز العمودي:
1. عندما يكون المحاذاة العمودية: وسط ، يتوافق مركز العنصر مع مركز العناصر المحيطة.
2. تعريف المركز هنا هو: الصورة بالطبع نصف الارتفاع ، ويجب نقل النص إلى أعلى بمقدار 0.5ex بناءً على خط الأساس ، أي مركز الحرف الصغير x. ومع ذلك ، غالبًا ما تحدد العديد من المتصفحات وحدة EX على أنها 0.5EM ، لذلك ليس بالضرورة مركز X (إذا كنت لا تفهم الأسماء مثل خط الأساس ، فيرجى قراءة مقالة Wheatlee أولاً)
وفقًا لهذه الفكرة ، بالمقارنة مع المشكلات التي واجهتها ، فإن أول ما يتبادر إلى الذهن هو التحقق مما إذا كان المتصفح يستخدم نفس القواعد لطبعات الاختيار والصور لتقديمها (ما إذا كنت تعامل خانات الاختيار كصورة مربعة). لذلك كتبت الرمز التالي:
<style>
الجسم {font-size: 12px ؛}
</style>
<نمط الإدخال = العمودي المحاذاة: الأوسط ؛ الاسم = نوع الاختبار = مربع الاختيار>
<emg style = align align: middle ؛ src = testpic.gif />
نص اختبار
testpic.gif في الكود عبارة عن صورة سوداء بنفس حجم خانة الاختيار بالضبط. الشاشة التالية تحت FF3.5:
الصفحة السابقة 1 2 3 4 الصفحة التالية اقرأ النص الكامل