يتم تنفيذ تخطيط الصفحة في معايير الويب باستخدام Div وCSS. الأكثر استخدامًا هو تأثير توسيط الصفحة بأكملها أفقيًا. هذه هي المعرفة الأساسية في تخطيط الصفحة والمعرفة التي يجب إتقانها أولاً. ومع ذلك، لا يزال الناس يطرحون هذا السؤال كثيرًا هنا، وسألخص بإيجاز طريقة استخدام Div وCSS لتحقيق التمركز الأفقي للصفحة:
1. يتم استخدام هامش:auto 0 وtext-aligh:center
في المتصفحات الحديثة (مثل الإنترنت). Explorer 7، وFirefox، وOpera، وما إلى ذلك.) طريقة تحقيق التوسيط الأفقي في المتصفحات الحديثة بسيطة للغاية، ما عليك سوى ضبط الهوامش اليسرى واليمنى على الوضع التلقائي. معنى:
#wrap { الهامش:0 تلقائي؛}
يعني الرمز أعلاه أنه يتم ضبط المسافة بين div div والجانبين الأيسر والأيمن تلقائيًا، وتكون القيم العلوية والسفلية 0 (يمكن أن تكون أيًا). يرجى تشغيل الكود الحالي في متصفح حديث (مثل Internet Explorer 7، وFirefox، وOpera، وما إلى ذلك):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<نمط النوع = "نص/CSS">
شعبة # التفاف {
العرض: 760 بكسل؛
الهامش:0 تلقائي؛
الحدود: 1 بكسل صلب #333؛
لون الخلفية:#ccc;
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
لتعيين التوسيط الأفقي لعناصر الصفحة في المتصفحات الحديثة مثل Firefox، ما عليك سوى تحديد هامش:0 تلقائي؛
<قبل>
شعبة # التفاف {
العرض: 760 بكسل؛
هامش:0 تلقائي /*0 هنا يمكن أن تكون أي قيمة*/
الحدود: 1px الصلبة #ccc؛
لون الخلفية:#999;
}
</قبل>
</div>
</الجسم>
</html>
ما ورد أعلاه يعمل بشكل جيد للغاية. لكن هذا لا يعمل في Internet Explorer 6 والإصدارات الأحدث، ولكن لحسن الحظ لديه حل بديل خاص به. في Internet Explorer، تكون سمة محاذاة النص قابلة للتوريث، أي أنه بعد تعيينها في العنصر الأصلي، ستحتوي على هذه السمة في العنصر الفرعي بشكل افتراضي. لذلك، يمكننا تعيين قيمة سمة محاذاة النص في علامة الجسم إلى المركز، بحيث يتم توسيط جميع العناصر الموجودة في الصفحة تلقائيًا. وفي الوقت نفسه، نحتاج أيضًا إلى إضافة خطاف لتغيير النص الموجود في الصفحة إليه بالطريقة التي اعتدنا عليها في القراءة - محاذاة إلى اليسار. لذا علينا كتابة الكود هكذا:
الجسم {محاذاة النص: المركز؛}
#التفاف {محاذاة النص: يسار؛}
بهذه الطريقة، يمكننا بسهولة تحقيق المحاذاة المركزية لـ Div في Internet Explorer. لذلك، لعرض تأثير التمركز في جميع المتصفحات، يمكننا كتابة الكود الخاص بنا على النحو التالي:
الجسم { محاذاة النص: المركز }
#wrap { محاذاة النص: يسار؛
الهامش:0 تلقائي؛
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<نمط النوع = "نص/CSS">
الجسم { محاذاة النص: المركز }
شعبة # التفاف {
محاذاة النص:يسار؛
العرض: 760 بكسل؛
الهامش:0 تلقائي؛
الحدود: 1 بكسل صلب #333؛
لون الخلفية:#ccc;
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
لتعيين التوسيط الأفقي لعناصر الصفحة في المتصفحات الحديثة مثل Firefox، ما عليك سوى تحديد هامش:0 تلقائي؛
<قبل>
شعبة # التفاف {
العرض: 760 بكسل؛
هامش:0 تلقائي /*0 هنا يمكن أن تكون أي قيمة*/
الحدود: 1px الصلبة #ccc؛
لون الخلفية:#999;
}
في Internet Explorer 6 والإصدارات الأقدم، نحتاج أيضًا إلى إجراء الإعدادات التالية:
الجسم { محاذاة النص: المركز }
شعبة # التفاف {
محاذاة النص:يسار؛
}
</قبل>
</div>
</الجسم>
</html>
ولكن هناك فرضية هنا، وهي أن العنصر المركزي يجب أن يكون له عرض ثابت، على سبيل المثال، قمنا بتعيينه هنا على 760 بكسل.
2. تحديد الموضع النسبي والهوامش السالبة
قم بإجراء تحديد موضع نسبي للالتفاف، ثم استخدم الهوامش السالبة لإزاحة الإزاحة. هذه الطريقة بسيطة نسبيًا وسهلة التنفيذ:
#wrap {
الموقف:نسبي؛
العرض: 760 بكسل؛
اليسار:50%;
الهامش الأيسر: -380 بكسل
}
معنى هذا الرمز هو تعيين موضع الالتفاف بالنسبة إلى علامة الجسم للعنصر الأصلي، ثم نقل حده الأيسر إلى منتصف الصفحة (أي معنى اليسار: 50٪ أخيرًا)؛ التحرك من الموضع الأوسط إلى اليسار وإزاحته للخلف بمقدار نصف المسافة بحيث يتم توسيطه أفقيًا.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<نمط النوع = "نص/CSS">
شعبة # التفاف {
الموقف:نسبي؛
العرض: 760 بكسل؛
اليسار:50%;
الهامش الأيسر:-380 بكسل؛
الحدود: 1 بكسل صلب #333؛
لون الخلفية:#ccc;
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
الطريقة التي تعمل في جميع المتصفحات:
<قبل>
شعبة # التفاف {
الموقف:نسبي؛
العرض: 760 بكسل؛
اليسار:50%;
الهامش الأيسر:-380 بكسل؛
الحدود: 1 بكسل صلب #333؛
لون الخلفية:#ccc;
}
</قبل>
</div>
</الجسم>
</html>
وبالمثل، تحتاج إلى ضبط عرض ثابت قبل ضبط التوسيط الأفقي.
ما الطريقة التي تختارها؟
أي من الطريقتين السابقتين أفضل؟ يبدو أن الطريقة الأولى تستخدم تقنية Hack، لكنها في الواقع ليست كذلك، فهي طريقة كتابة قياسية على الويب مرضية تمامًا وتتوافق تمامًا مع المواصفات، لذلك يمكنك اختيار أي من الطريقتين للاستخدام هي مشكلة اختراق CSS.
3. طرق التوسيط الأخرى
المذكورة أعلاه هي جميع تطبيقات التوسيط الأفقي عند ضبط عرض معين. في بعض الأحيان نرغب في إنشاء تخطيط مرن، أو عندما يكون هناك عنصر في حاوية، نريد فقط أن يتم توسيطه ولا نريد تعيين عرض محدد. في الواقع، هذا ليس تخطيطًا مركزيًا حقيقيًا بالنسبة لعنصر بطول 100%، هل يمكن القول أنه محاذي للوسط أم لليسار؟ لذا فإن كل التوسيط بدون الارتفاع والعرض ليس توسيطًا حقيقيًا. لقد قمنا بتعيين هذا التصميم باستخدام حشوة العنصر، وفي الواقع قمنا بتغيير حجم الحاوية للعنصر الأصلي:
إذا أردنا أن يتغير طول عنصر الالتفاف مع النافذة مع الحفاظ على المركز فيمكننا أن نكتب هكذا:
جسم {
الحشو: 10 بكسل 150 بكسل؛
}
هنا، نحتاج فقط إلى الحفاظ على المساحة المتروكة على الجانبين الأيسر والأيمن للعنصر الأصلي متساوية.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<نمط النوع = "نص/CSS">
جسم {
الحشو: 10 بكسل 150 بكسل؛
}
شعبة # التفاف {
الحدود: 1 بكسل صلب #333؛
لون الخلفية:#ccc;
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
تخطيط مرن ومركزي يتغير مع حجم نافذة المتصفح:
<قبل>
جسم {
الحشو: 10 بكسل 150 بكسل؛
}
هنا، نحتاج فقط إلى الحفاظ على المساحة المتروكة على الجانبين الأيسر والأيمن للعنصر الأصلي متساوية.
</قبل>
</div>
</الجسم>
</html>
بالطبع هذا فقط "يبدو أنه متمركز"، لكنه غالبًا ما يكون مفيدًا جدًا.