يتم تنفيذ تخطيط الصفحة في معايير الويب باستخدام Div وCSS. الأكثر استخدامًا هو تأثير توسيط الصفحة بأكملها أفقيًا. هذه هي المعرفة الأساسية في تخطيط الصفحة والمعرفة التي يجب إتقانها أولاً. ومع ذلك، لا يزال الناس يطرحون هذا السؤال كثيرًا هنا، وسألخص بإيجاز طريقة استخدام Div وCSS لتحقيق التمركز الأفقي للصفحة:
1. يتم استخدام هامش:auto 0 وtext-aligh:center
في المتصفحات الحديثة (مثل الإنترنت). Explorer 7، وFirefox، وOpera، وما إلى ذلك.) طريقة تحقيق التوسيط الأفقي في المتصفحات الحديثة بسيطة للغاية، ما عليك سوى ضبط الهوامش اليسرى واليمنى على الوضع التلقائي. معنى:
#wrap { الهامش:0 تلقائي؛}
يعني الرمز أعلاه أنه يتم ضبط المسافة بين div div والجانبين الأيسر والأيمن تلقائيًا، وتكون القيم العلوية والسفلية 0 (يمكن أن تكون أيًا). يرجى تشغيل الكود الحالي في متصفح حديث (مثل Internet Explorer 7، وFirefox، وOpera، وما إلى ذلك):
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
ما ورد أعلاه يعمل بشكل جيد للغاية. لكن هذا لا يعمل في Internet Explorer 6 والإصدارات الأحدث، ولكن لحسن الحظ لديه حل بديل خاص به. في Internet Explorer، تكون سمة محاذاة النص قابلة للتوريث، أي أنه بعد تعيينها في العنصر الأصلي، ستحتوي على هذه السمة في العنصر الفرعي بشكل افتراضي. لذلك، يمكننا تعيين قيمة سمة محاذاة النص في علامة الجسم إلى المركز، بحيث يتم توسيط جميع العناصر الموجودة في الصفحة تلقائيًا. وفي الوقت نفسه، نحتاج أيضًا إلى إضافة خطاف لتغيير النص الموجود في الصفحة إليه بالطريقة التي اعتدنا عليها في القراءة - محاذاة إلى اليسار. لذا علينا كتابة الكود هكذا:
الجسم {محاذاة النص: المركز؛}
#التفاف {محاذاة النص: يسار؛}
بهذه الطريقة، يمكننا بسهولة تحقيق المحاذاة المركزية لـ Div في Internet Explorer. لذلك، لعرض تأثير التمركز في جميع المتصفحات، يمكننا كتابة الكود الخاص بنا على النحو التالي:
الجسم { محاذاة النص: المركز }
#wrap { محاذاة النص: يسار؛
الهامش:0 تلقائي؛
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
ولكن هناك فرضية هنا، وهي أن العنصر المركزي يجب أن يكون له عرض ثابت، على سبيل المثال، قمنا بتعيينه هنا على 760 بكسل.
2. تحديد الموضع النسبي والهوامش السالبة
قم بإجراء تحديد موضع نسبي للالتفاف، ثم استخدم الهوامش السالبة لإزاحة الإزاحة. هذه الطريقة بسيطة نسبيًا وسهلة التنفيذ:
#wrap {
الموقف:نسبي؛
العرض: 760 بكسل؛
اليسار:50%;
الهامش الأيسر: -380 بكسل
}
معنى هذا الرمز هو تعيين موضع الالتفاف بالنسبة إلى علامة الجسم للعنصر الأصلي، ثم نقل حده الأيسر إلى منتصف الصفحة (أي معنى اليسار: 50٪ أخيرًا)؛ التحرك من الموضع الأوسط إلى اليسار وإزاحته للخلف بمقدار نصف المسافة بحيث يتم توسيطه أفقيًا.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
وبالمثل، تحتاج إلى ضبط عرض ثابت قبل ضبط التوسيط الأفقي.
ما الطريقة التي تختارها؟
أي من الطريقتين السابقتين أفضل؟ يبدو أن الطريقة الأولى تستخدم تقنية Hack، لكنها في الواقع ليست كذلك، فهي طريقة كتابة قياسية على الويب مرضية تمامًا وتتوافق تمامًا مع المواصفات، لذلك يمكنك اختيار أي من الطريقتين للاستخدام هي مشكلة اختراق CSS.
3. طرق التوسيط الأخرى
المذكورة أعلاه هي جميع تطبيقات التوسيط الأفقي عند ضبط عرض معين. في بعض الأحيان نرغب في إنشاء تخطيط مرن، أو عندما يكون هناك عنصر في حاوية، نريد فقط أن يتم توسيطه ولا نريد تعيين عرض محدد. في الواقع، هذا ليس تخطيطًا مركزيًا حقيقيًا بالنسبة لعنصر بطول 100%، هل يمكن القول أنه محاذي للوسط أم لليسار؟ لذا فإن كل التوسيط بدون الارتفاع والعرض ليس توسيطًا حقيقيًا. لقد قمنا بتعيين هذا التصميم باستخدام حشوة العنصر، وفي الواقع قمنا بتغيير حجم الحاوية للعنصر الأصلي:
إذا أردنا أن يتغير طول عنصر الالتفاف مع النافذة مع الحفاظ على المركز فيمكننا أن نكتب هكذا:
جسم {
الحشو: 10 بكسل 150 بكسل؛
}
هنا، نحتاج فقط إلى الحفاظ على المساحة المتروكة على الجانبين الأيسر والأيمن للعنصر الأصلي متساوية.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
بالطبع هذا فقط "يبدو أنه متمركز"، لكنه غالبًا ما يكون مفيدًا جدًا.