ملخص لحلول التوسيط الأفقي للعناصر في معايير الويب

دعونا نلقي نظرة أولاً على رمز ملف XHTML/HTML البسيط الخاص بي (جزء). هدفنا هو توسيط #container أفقيًا.

<الجسم>

<div معرف = "حاوية">

<h1>المحتوى</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

</body>استخدم الهوامش التكيفية (الهامش التلقائي)

الطريقة المفضلة لتوسيط أي عنصر أفقيًا هي استخدام خاصية الهامش وضبط القيم اليسرى واليمنى على تلقائي. ولكن يجب عليك تحديد عرض لـ #container.

شعبة # حاوية {

الهامش الأيسر: تلقائي؛

الهامش الأيمن: تلقائي؛

العرض: 168 بكسل؛

}

يعمل هذا الحل على أي متصفح حديث، حتى IE6، طالما أنه في وضع الامتثال لمعايير الويب. لسوء الحظ، لن يعمل هذا في الإصدارات السابقة من IE/Win. نقوم بعمل جدول لهذا: قائمة دعم الحدود التكيفية للتصفح، دعم إصدار المتصفح

Internet Explorer 6.0، وضع التوافق نعم

إنترنت إكسبلورر 6.0، وضع المراوغات رقم

إنترنت إكسبلورر 5.5 ويندوز رقم

إنترنت إكسبلورر 5.0 ويندوز رقم

إنترنت إكسبلورر 5.2 ماكنتوش نعم

جميع الإصدارات الحالية من موزيلا هي

جميع إصدارات موزيلا فايرفوكس هي

نتسكيب 4.x رقم

نتسكيب 6.x+ نعم

أوبرا 6.0، 7.0 ماكنتوش وويندوز نعم

سفاري 1.2 نعم

على الرغم من أن دعم المتصفح محدود، إلا أن معظم المصممين يشجعونك على القيام بذلك كلما أمكن ذلك. ولكن لا يزال بإمكاننا استخدام CSS في جميع المواقف. استخدام محاذاة النص (محاذاة النص) يتطلب هذا الحل استخدام خاصية محاذاة النص، والتي يتم تطبيقها على عنصر النص وتعيين قيمة المركز.

جسم{

محاذاة النص:مركز؛

}
إنه ينصف جميع المتصفحات، وهو شامل وفي متناول يدك. ومع ذلك، فهذه خاصية معطاة للنص، والتي تتسبب في توسيط النص الموجود في #container أيضًا. ولذلك، يتعين علينا القيام ببعض الأعمال الإضافية على التخطيط:

شعبة # حاوية {

محاذاة النص: يسار؛

}

بهذه الطريقة، يمكن إرجاع محاذاة النص إلى الحالة الافتراضية. الحدود المتكاملة ومحاذاة النص نظرًا لأن محاذاة النص متوافقة مع الإصدارات السابقة ولأن المتصفحات المعاصرة تدعم أيضًا الحدود التكيفية، فإن العديد من المصممين يجمعونها لتحقيق الاستخدام عبر المستعرضات.

جسم{

محاذاة النص: مركز؛
}

#حاوية {

الهامش الأيسر: تلقائي؛

الهامش الأيمن: تلقائي؛

الحدود: 1 بكسل أحمر خالص؛

العرض: 168 بكسل؛

محاذاة النص: يسار

}

للأسف، لا يزال الأمر غير مثالي لأنه لا يزال اختراقًا. عليك أن تكتب قواعد زائدة عن الحاجة لترتيب النص. ولكن الآن، يمكننا استخدام حل أكثر مثالية عبر المتصفحات.
حل الحدود السلبية