فيما يتعلق بمسألة تحكم CSS في التمركز الأفقي لـ DIVs، أرى أن العديد من القادمين الجدد في حيرة من أمرهم. أتذكر أن المرة الأولى التي قرأت فيها CSS كانت عبارة عن كتاب كتبه شخص أجنبي، وكان يتحدث عن استخدام التمركز.
الهامش الأيسر: تلقائي؛
الهامش الأيمن: تلقائي؛
في الواقع، إنه يعادل:
الهامش:0 تلقائي؛
لذلك يمكنك استخدام هذه الطريقة، ولكن وجد بعض الأشخاص أنها لم تكن مركزية عند استخدام IE. يوصى بالتحقق مما إذا كنت تفتقد إعلان DTD.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
كثير من الناس ارتكبوا أخطاء مماثلة! يمكن أيضًا القول أن هذه الطريقة قد تمت تجربتها واختبارها، لكنها لا تزال غير فعالة في بعض الحالات. لذلك هناك طريقة ثانية.
الهامش الأيسر:50%;
اليسار: -العرض/2؛
العرض هنا ليس العرض في CSS، ولكنه عرض DIV الخاص بك. على سبيل المثال، إذا كان عرض div الخاص بك 768 بكسل، فيجب عليك تعيين اليسار: -384 بكسل. جيد جدًا، هناك بالفعل طريقتان يمكن القول أنهما قد حلتا المشكلات التي قد تواجهها.
في بعض الأحيان ستجد أن هذين الاثنين ليسا كافيين. غير متوافق مع بعض المتصفحات. لذلك وجدت طريقة ثالثة، والتي تأخذ في الاعتبار IE بشكل أساسي، وتعتمد على الطريقة الأولى. يتطلب تحديد الجسم.
الجسم {محاذاة النص: المركز؛}
بهذه الطريقة، يتم توسيطه أيضًا ضمن IE، ولكنه يجلب مشكلة جديدة حيث تجد أن كل النص الموجود في صفحتك يتم توسيطه، وهو أمر غير جيد المظهر. يمكن حل هذه المشكلة بسهولة، ما عليك سوى إضافة text-align: left وإعدادات الضبط الأخرى إلى تعريف DIV الخاص بك.
النص أعلاه هو مجرد مرجع ورسم تخطيطي بعد العشاء. يمكن للجميع الانتباه إليها في العمل العملي!