كيفية محاذاة كتلة إلى وسط الصفحة. لمحاذاة كتلة عموديًا داخل الكتلة الأصلية

11.05.2019

في كثير من الأحيان تكون المهمة هي محاذاة كتلة في وسط الصفحة / الشاشة، وحتى بدون برنامج Java النصي، دون تعيين أبعاد جامدة أو مسافات بادئة سلبية، وحتى تعمل أشرطة التمرير للوالد إذا تجاوزت الكتلة حجمها . هناك الكثير من الأمثلة الرتيبة على الإنترنت حول كيفية محاذاة الكتلة إلى وسط الشاشة. كقاعدة عامة، يعتمد معظمها على نفس المبادئ.

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

الخيار 1: المسافة البادئة السلبية. نقوم بوضع الكتلة ذات السمات العلوية واليسار بنسبة 50٪، ومعرفة ارتفاع وعرض الكتلة مسبقًا، نقوم بتعيين هامش سلبي، وهو ما يساوي نصف حجم الكتلة. العيب الكبير لهذا الخيار هو أنك تحتاج إلى حساب المسافات البادئة السلبية. كما أن الكتلة لا تتصرف بشكل صحيح تمامًا عندما تكون محاطة بأشرطة التمرير - فهي ببساطة مقطوعة لأنها تحتوي على هوامش سلبية.

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 50%؛ يسار : 50%؛ الهامش: -125 بكسل 0 0 -125 بكسل؛ img (أقصى عرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛))

الخيار 2. المسافة البادئة التلقائية. أقل شيوعا، ولكن مماثلة للأول. بالنسبة للكتلة، قمنا بتعيين العرض والارتفاع، ووضع السمات في أعلى اليمين وأسفل اليسار على 0، وقمنا بتعيين الهامش تلقائيًا. تتمثل ميزة هذا الخيار في عمل أشرطة التمرير على الأصل، إذا كان الأخير لديه عرض وارتفاع بنسبة 100%. عيب هذه الطريقة هو الإعداد الصارم للأبعاد.

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ الهامش: تلقائي؛ الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛ )

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ العرض: الجدول؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ > .inner ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: الوسط؛ ) ) .block ( العرض: كتلة مضمنة؛ img ( العرض: كتلة؛ الحدود: لا شيء؛ ) )

لإضافة تمرير إلى هذا المثال، سيتعين عليك إضافة عنصر آخر إلى التصميم.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

الخيار 4. العنصر الزائف. يخلو هذا الخيار من كافة المشاكل المذكورة في الطرق السابقة، كما يقوم بحل المشاكل الأصلية. تتمثل الفكرة في تصميم العنصر الزائف السابق على الأصل، أي الارتفاع بنسبة 100%، والمحاذاة المركزية، ونموذج الكتلة المضمّن. بنفس الطريقة، يتم تعيين الكتلة نفسها على نموذج كتلة الخط، محاذاة إلى المركز. ولمنع الكتلة من "الوقوع" تحت العنصر الزائف عندما يكون حجم العنصر الأول أكبر من العنصر الأصلي، نشير إلى المسافة البيضاء الأصلية: nowrap وfont-size: 0، وبعد ذلك نلغي هذه الأنماط لـ الكتلة التي تحتوي على ما يلي - المسافة البيضاء: عادية. في هذا المثال، حجم الخط: 0 مطلوب لإزالة المسافة الناتجة بين الأصل والكتلة بسبب تنسيق التعليمات البرمجية. يمكن إزالة المساحة بطرق أخرى، ولكن من الأفضل تجنبها ببساطة.

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ المسافة البيضاء: nowrap؛ محاذاة النص: المركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100%؛ العرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

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

الأصل (الموضع: ثابت؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ مسافة بيضاء: nowrap؛ محاذاة النص: مركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100% العرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

الخيار 5. فليكس بوكس. واحدة من أبسط الطرق وأكثرها أناقة هي استخدام flexbox. لا يتطلب حركات الجسم غير الضرورية، ويصف بوضوح جوهر ما يحدث، وهو مرن للغاية. الشيء الوحيد الذي يستحق التذكر عند اختيار هذه الطريقة هو دعم IE من الإصدار 10 ضمناً. caniuse.com/#feat=flexbox

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ العرض: مرن؛ محاذاة العناصر: المركز؛ محاذاة المحتوى: المركز؛ ضبط المحتوى: المركز؛ تجاوز السعة: تلقائي؛ ) .block ( الخلفية: #60a839; img ( العرض: كتلة; الحدود: لا شيء; ) )

الخيار 6. التحويل. مناسب إذا كنا مقيدين بالبنية، ولا توجد طريقة للتعامل مع العنصر الأصلي، ولكن يجب محاذاة الكتلة بطريقة ما. سوف تأتي وظيفة CSS ترجمة () للإنقاذ. ستؤدي قيمة الموضع المطلق بنسبة 50% إلى وضع الزاوية العلوية اليسرى من الكتلة في المنتصف تمامًا، ثم ستحرك قيمة الترجمة السلبية الكتلة بالنسبة لأبعادها الخاصة. يرجى ملاحظة أن التأثيرات السلبية قد تظهر على شكل حواف غير واضحة أو نمط الخط. أيضًا، يمكن أن تؤدي هذه الطريقة إلى مشاكل في حساب موضع الكتلة باستخدام JavaScript. في بعض الأحيان، للتعويض عن فقدان 50% من العرض بسبب استخدام خاصية CSS اليسرى، يمكن استخدام القاعدة المحددة للكتلة. مساعدة: الهامش الأيمن: -50%؛

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة( -50%، -50%( img ( العرض: كتلة; ) )

الخيار 7. زر. خيار إنتاج المستخدم، حيث يتم تأطير الكتلة في علامة زر. يتمتع الزر بخاصية توسيط كل ما هو بداخله، أي عناصر النموذج المضمن والخط المضمن (الكتل المضمنة). عمليا لا أنصح باستخدامه.

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ الخلفية: لا شيء؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .block ( العرض: كتلة مضمنة؛ img (العرض: كتلة؛؛ الحدود: لا شيء؛))

مكافأة باستخدام فكرة الخيار الرابع، يمكنك تعيين هوامش خارجية للكتلة، وفي نفس الوقت سيتم عرض الأخير بشكل مناسب محاطًا بأشرطة التمرير.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

يمكنك أيضًا محاذاة الصورة إلى المنتصف، وإذا كانت الصورة أكبر من الصورة الأصلية، فقم بقياسها إلى حجم الصورة الأصلية.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال مع صورة كبيرة:

فلاد ميرزيفيتش

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

التمركز العمودي

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

مثال 1: توسيط الرسم

جدول المحاذاة (العرض: 100%; /* عرض الجدول */ الارتفاع: 100%; /* ارتفاع الجدول */ )

في هذا المثال، يتم تعيين المحاذاة الأفقية باستخدام معلمة العلامة align="center". ، ولا يجوز توسيط محتويات الخلية عموديًا، لأن هذا هو الموضع الافتراضي.

لتعيين ارتفاع الجدول على 100%، تحتاج إلى إزالة الرمز، ولن يعد صالحًا.

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

المحاذاة الأفقية

من خلال الجمع بين سمات المحاذاة (المحاذاة الأفقية) والمحاذاة العمودية للعلامة يجوز ضبط عدة أنواع من مواضع العناصر بالنسبة لبعضها البعض. في التين. يوضح الشكل 1 طرق محاذاة العناصر أفقيًا.

دعونا نلقي نظرة على بعض الأمثلة على محاذاة النص وفقًا للشكل أدناه.

محاذاة أعلى

لتحديد المحاذاة العليا لمحتويات الخلية، لعلامة تحتاج إلى تعيين سمة valign بالقيمة الأعلى (المثال 2).

مثال 2: استخدام فالين

تنسيق

العمود 1 العمود 2

في هذا المثال، يتم التحكم في خصائص الخلية باستخدام معلمات العلامة ، ولكنه أيضًا أكثر ملاءمة للتغيير من خلال الأنماط. على وجه الخصوص، يتم تحديد المحاذاة في الخلايا بواسطة خصائص المحاذاة العمودية ومحاذاة النص (المثال 3).

مثال 3: تطبيق الأنماط للمحاذاة

جدول المحاذاة (العرض: 100%; /* عرض الجدول */ ) #col1 ( العرض: 75%; /* عرض العمود الأول */ الخلفية: #f0f0f0; /* لون خلفية العمود الأول */ ) #col2 ( العرض: 25 % /* عرض العمود الثاني */ الخلفية: #fc5 /* لون خلفية العمود الثاني */ محاذاة النص: لليمين /* المحاذاة لليمين */ ) #col1, #col2 ( محاذاة عمودية: أعلى ; / * المحاذاة العلوية */ الحشو: 5 بكسل /* الهوامش حول محتويات الخلية */ ) ;

العمود 1 العمود 2

لتقصير الكود، يستخدم هذا المثال مجموعة من المحددات لأنه يتم تطبيق خصائص المحاذاة الرأسية والحشو على خليتين في نفس الوقت.

تتم المحاذاة السفلية بنفس الطريقة، ولكن بدلاً من القيمة العليا، يتم استخدام القيمة السفلية.

محاذاة المركز

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

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

المثال 4: محاذاة الصيغة

تنسيق

(18.6)

في هذا المثال، يتم ترك الخلية الأولى من الجدول فارغة؛ وهي تعمل فقط على إنشاء مسافة بادئة، والتي بالمناسبة يمكن تعيينها أيضًا باستخدام الأنماط.

محاذاة عناصر النموذج

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

للتأكد من أن النص الموجود بجوار حقول النموذج محاذاة إلى اليمين وأن عناصر النموذج نفسها محاذاة إلى اليسار، ستحتاج إلى جدول به حدود غير مرئية وعمودين. سيحتوي العمود الأيسر على النص نفسه، وسيحتوي العمود الأيمن على حقول نصية (المثال 5).

المثال 5: محاذاة حقول النموذج

تنسيق

اسم
بريد إلكتروني
تعليق

في هذا المثال، بالنسبة لتلك الخلايا التي تتطلب المحاذاة إلى اليمين، تتم إضافة سمة align="right". للتأكد من وضع علامة التعليق أعلى النص متعدد الأسطر، يتم تعيين الخلية المقابلة على محاذاة لأعلى باستخدام السمة valign.

تعد توسيط العناصر عموديًا باستخدام CSS مهمة تمثل بعض الصعوبة للمطورين. ومع ذلك، هناك عدة طرق لحلها، وهي بسيطة للغاية. يقدم هذا الدرس 6 خيارات لتوسيط المحتوى عموديًا.

لنبدأ بوصف عام للمشكلة.

مشكلة التمركز العمودي

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

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

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

ترتبط قيمة خاصية المحاذاة العمودية بالعنصر السطري الأصلي.

  • في سطر من النص، تكون المحاذاة نسبة إلى ارتفاع السطر.
  • تستخدم خلية الجدول المحاذاة بالنسبة لقيمة محسوبة بواسطة خوارزمية خاصة (عادةً ارتفاع الصف).

لكن لسوء الحظ، لا تعمل خاصية المحاذاة العمودية على العناصر على مستوى الكتلة (على سبيل المثال، الفقرات الموجودة داخل عنصر div). قد يؤدي هذا الموقف إلى الاعتقاد بأنه لا يوجد حل لمشكلة المحاذاة العمودية.

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

طريقة ارتفاع الخط

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

افتراضيًا، سيتم توزيع المساحة البيضاء بالتساوي في أعلى النص وأسفله. وسيتم توسيط الخط عموديا. في كثير من الأحيان يكون ارتفاع الخط مساوياً لارتفاع العنصر.

لغة البرمجة:

النص المطلوب

CSS:

#child (ارتفاع الخط: 200 بكسل؛)

تعمل هذه الطريقة في جميع المتصفحات، على الرغم من أنه يمكن استخدامها لسطر واحد فقط. تم اختيار القيمة 200 بكسل في المثال بشكل تعسفي. يمكنك استخدام أي قيمة أكبر من حجم خط النص.

توسيط الصورة باستخدام ارتفاع الخط

ماذا لو كان المحتوى صورة؟ هل ستنجح الطريقة المذكورة أعلاه؟ تكمن الإجابة في سطر آخر من كود CSS.

لغة البرمجة:

CSS:

#parent (ارتفاع الخط: 200 بكسل;) #parent img (محاذاة رأسية: وسط;)

يجب أن تكون قيمة خاصية ارتفاع الخط أكبر من ارتفاع الصورة.

طريقة جدول CSS

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

ملاحظة: جدول CSS ليس هو نفسه جدول HTML.

لغة البرمجة:

محتوى

CSS:

# الأصل (العرض: الجدول؛) # الطفل (العرض: خلية الجدول؛ المحاذاة العمودية: الوسط؛)

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

على عكس الطريقة المذكورة أعلاه، في هذه الحالة يمكن أن يكون المحتوى ديناميكيًا حيث سيتغير حجم عنصر div وفقًا لمحتواه.

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

تحديد المواقع المطلقة والهوامش السلبية

تعمل هذه الطريقة أيضًا في جميع المتصفحات. لكنه يتطلب إعطاء العنصر الذي يتم تمركزه ارتفاعًا.

يقوم كود المثال بتنفيذ التوسيط الأفقي والرأسي في نفس الوقت:

لغة البرمجة:

محتوى

CSS:

# الأصل (الموضع: نسبي؛) # الطفل ( الموضع: مطلق؛ الأعلى: 50%؛ اليسار: 50%؛ الارتفاع: 30%؛ العرض: 50%؛ الهامش: -15% 0 0 -25%؛ )

أولاً، قمنا بتعيين نوع موضع العنصر. بعد ذلك، قمنا بتعيين الخصائص العلوية والسفلية لعنصر div المتداخل على 50%، وهو ما يتوافق مع مركز العنصر الأصلي. لكن المركز هو الزاوية اليسرى العليا للعنصر المتداخل. لذلك، تحتاج إلى رفعه (نصف الارتفاع) وتحريكه إلى اليسار (نصف العرض)، ثم يتزامن المركز مع مركز العنصر الأصلي. لذا فإن معرفة ارتفاع العنصر في هذه الحالة أمر ضروري. ثم قمنا بتعيين العنصر ذو الهوامش العلوية والسالبة اليسرى يساوي نصف الارتفاع والعرض على التوالي.

هذه الطريقة لا تعمل في جميع المتصفحات

تحديد المواقع المطلقة وتمتد

ينفذ رمز المثال التوسيط الرأسي والأفقي.

لغة البرمجة:

محتوى

CSS:

# الأصل (الموضع: نسبي؛) # الطفل ( الموضع: مطلق؛ الأعلى: 0؛ الأسفل: 0؛ اليسار: 0؛ اليمين: 0؛ العرض: 50%؛ الارتفاع: 30%؛ الهامش: تلقائي؛ )

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

سيؤدي تعيين الهوامش التي يتم إنشاؤها تلقائيًا على جميع الجوانب إلى تعيين قيم متساوية على الجوانب الأربعة وتوسيط عنصر div المتداخل على العنصر الأصلي.

لسوء الحظ، هذه الطريقة لا تعمل في IE7 وما دونه.

مسافات متساوية فوق وتحت

في هذه الطريقة، يتم تعيين المساحة المتساوية بشكل صريح أعلى وأسفل العنصر الأصلي.

لغة البرمجة:

محتوى

CSS:

# الأصل ( الحشو: 5% 0; ) # الطفل ( الحشو: 10% 0; )

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

تُستخدم وحدات القياس النسبية لتغيير حجم العناصر ديناميكيًا. وبالنسبة لوحدات القياس المطلقة، سيتعين عليك إجراء العمليات الحسابية.

على سبيل المثال، إذا كان ارتفاع العنصر الأصلي 400 بكسل وكان العنصر المتداخل 100 بكسل، فستكون هناك حاجة إلى 150 بكسل من المساحة المتروكة في الأعلى والأسفل.

150 + 150 + 100 = 400

يتيح لك استخدام % ترك العمليات الحسابية للمتصفح.

هذه الطريقة تعمل في كل مكان. الجانب السلبي هو الحاجة إلى الحسابات.

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

شعبة عائمة

تستخدم هذه الطريقة عنصر div فارغًا يطفو ويساعد في التحكم في موضع العنصر المتداخل في المستند. لاحظ أنه يتم وضع div العائم قبل العنصر المتداخل في كود HTML.

لغة البرمجة:

محتوى

CSS:

# الأصل (الارتفاع: 250 بكسل؛) # العائم ( تعويم: يسار؛ الارتفاع: 50%؛ العرض: 100%؛ الهامش السفلي: -50 بكسل؛) # الطفل ( واضح: كلاهما؛ الارتفاع: 100 بكسل؛ )

قمنا بإزاحة div الفارغ إلى اليسار أو اليمين وضبطنا ارتفاعه على 50% من العنصر الأصلي. بهذه الطريقة سوف تملأ النصف العلوي من العنصر الأصلي.

نظرًا لأن div عائم، تتم إزالته من التدفق الطبيعي للمستند، ونحتاج إلى إلغاء تغليف النص الموجود على العنصر المتداخل. يستخدم المثال واضح: كلاهما، ولكن يكفي استخدام نفس اتجاه إزاحة عنصر div الفارغ العائم.

الحد العلوي لعنصر div المتداخل يقع مباشرة أسفل الحد السفلي لعنصر div الفارغ. نحتاج إلى تحريك العنصر المتداخل لأعلى بمقدار نصف ارتفاع العنصر الفارغ العائم. لحل المشكلة، استخدم قيمة خاصية الهامش السفلي السالبة لعنصر div الفارغ العائم.

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

خاتمة

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

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

ليس من السهل تحقيق المحاذاة العمودية للمركز باستخدام CSS. هناك العديد من الطرق ولا تعمل جميعها في جميع المتصفحات. دعونا نلقي نظرة على 5 طرق مختلفة وإيجابيات وسلبيات كل منها. مثال.

الطريقة الأولى

تفترض هذه الطريقة أننا قمنا بتعيين بعض العناصر لعرضها كجدول، ثم يمكننا استخدام خاصية المحاذاة الرأسية عليها (والتي تعمل بشكل مختلف في عناصر مختلفة).

بعض المعلومات المفيدة التي ينبغي أن تتمحور. #التفاف (العرض: الجدول؛) #الخلية (العرض: خلية الجدول؛ المحاذاة العمودية: الوسط؛)

الايجابيات
  • يمكن للمحتوى تغيير الارتفاع ديناميكيًا (الارتفاع غير محدد في CSS).
  • لا يتم قطع المحتوى إذا لم تكن هناك مساحة كافية له.
السلبيات
  • لا يعمل في IE 7 أو أقل
  • الكثير من العلامات المتداخلة
الطريقة الثانية

تستخدم هذه الطريقة الموضع المطلق لقسم div، مع تعيين الجزء العلوي على 50% والهامش العلوي ناقص نصف ارتفاع المحتوى. وهذا يعني أن الكائن يجب أن يكون له ارتفاع ثابت، والذي يتم تحديده في أنماط CSS.

بما أن الارتفاع ثابت، يمكنك ضبط overflow:auto; بالنسبة لقسم يحتوي على محتوى، وبالتالي، إذا لم يكن المحتوى مناسبًا، فستظهر أشرطة التمرير.

المحتوى هنا #content ( الموضع: مطلق؛ الأعلى: 50%؛ الارتفاع: 240 بكسل؛ الهامش العلوي: -120 بكسل؛ /* ناقص نصف الارتفاع */ )

الايجابيات
  • يعمل في جميع المتصفحات.
  • لا يوجد تداخل غير ضروري.
السلبيات
  • عندما لا تكون هناك مساحة كافية، يختفي المحتوى (على سبيل المثال، يكون div داخل النص وقد قام المستخدم بتصغير النوافذ، وفي هذه الحالة لن تظهر أشرطة التمرير.
الطريقة الثالثة

في هذه الطريقة، سنقوم بتغليف محتوى div بـ div آخر. فلنضبط ارتفاعه على 50% (الارتفاع: 50%;)، والهامش السفلي على نصف الارتفاع (margin-bottom:-contentheight;). سيتم مسح المحتوى العائم ويتم توسيطه.

هنا هو المحتوى #floater( float: left; height: 50%; Margin-bottom: -120px; ) #content( واضح: كلاهما; الارتفاع: 240px; الموضع: نسبي; )

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

تستخدم هذه الطريقة خاصية الموضع: المطلق. لـ div بأبعاد ثابتة (العرض والارتفاع). ثم قمنا بتعيين إحداثياتها أعلى:0؛ أسفل:0؛ ، ولكن بما أن لها ارتفاعًا ثابتًا، فلا يمكنها التمدد وتكون محاذية للمركز. هذا مشابه جدًا للطريقة المعروفة لتوسيط عنصر كتلة ذو عرض ثابت أفقيًا (الهامش: 0 تلقائي؛).

معلومات مهمة. #content( الموضع: مطلق؛ أعلى: 0؛ أسفل: 0؛ يسار: 0؛ يمين: 0؛ الهامش: تلقائي؛ الارتفاع: 240 بكسل؛ العرض: 70%؛ )

الايجابيات
  • بسيط جدا.
السلبيات
  • لا يعمل في إنترنت إكسبلورر
  • سيتم قطع المحتوى بدون أشرطة التمرير إذا لم تكن هناك مساحة كافية في الحاوية.
الطريقة الخامسة

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

بعض سطر النص #content( height: 100px; line-height: 100px; )

الايجابيات
  • يعمل في جميع المتصفحات.
  • لا يقطع النص إذا لم يكن مناسبًا.
السلبيات
  • يعمل فقط مع النص (لا يعمل مع عناصر الكتلة).
  • إذا كان هناك أكثر من سطر واحد من النص، فإنه يبدو سيئًا للغاية.

هذه الطريقة مفيدة جدًا للعناصر الصغيرة، مثل توسيط النص في زر أو حقل نص.

الآن بعد أن عرفت كيفية تحقيق المحاذاة العمودية للوسط، فلنقم بإنشاء موقع ويب بسيط سيبدو في النهاية على النحو التالي:

الخطوة 1

من الجيد دائمًا أن تبدأ بالترميز الدلالي. سيتم تنظيم صفحتنا على النحو التالي:

  • #floater (لتوسيط المحتوى)
  • #center (العنصر المركزي)
    • #جانب
      • #شعار
      • # التنقل (قائمة
      • #محتوى
    • #bottom (لحقوق النشر وكل ذلك)

    لنكتب علامة html التالية:

    شركة مركزية شركة

    عنوان الصفحة

    إعادة هندسة الاستعانة بمصادر خارجية ذات قيمة مضافة بشكل كلي بعد التعاون المرتكز على العمليات ومشاركة الأفكار. تبسيط الأسواق المتخصصة المؤثرة بقوة من خلال الضرورات الممكنة. تهيمن الابتكارات المتميزة بشكل كلي بعد سيناريوهات مقنعة. يمكنك استعادة المعايير العالية في رأس المال البشري بسلاسة من خلال المنتجات المصنعة الرائدة. قم بتجميع المخططات المتوافقة مع المعايير بشكل مميز قبل الدوامات القوية. يمكنك إعادة الاستفادة بشكل فريد من جاهزية الويب المعززة مقابل المعلومات الجاهزة.

    العنوان 2

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

    إشعار حقوق النشر يذهب هنا

    الخطوة 2

    الآن سنكتب أبسط CSS لوضع العناصر على الصفحة. يجب عليك حفظ هذا الكود في ملف style.css. ولهذا يتم كتابة الرابط في ملف html.

    Html، النص (الهامش: 0؛ الحشو: 0؛ الارتفاع: 100%؛) النص (الخلفية: url("page_bg.jpg") 50% 50% بدون تكرار #FC3؛ عائلة الخط: Georgia، Times، serifs؛ ) #floater ( الموضع: نسبي؛ تعويم: يسار؛ الارتفاع: 50%؛ الهامش السفلي: -200 بكسل؛ العرض: 1 بكسل؛ ) #centered ( الموضع: نسبي؛ واضح: يسار؛ الارتفاع: 400 بكسل؛ العرض: 80%؛ الحد الأقصى - العرض: 800 بكسل؛ الحد الأدنى للعرض: 400 بكسل؛ الهامش: 0 تلقائي؛ الحد: 4 بكسل صلب #666) #bottom (الموضع: مطلق؛ الأسفل: 0؛ اليمين: 0؛) #nav (الموضع: مطلق؛ اليسار: 0) ؛ أسفل: 0؛ الحشو: 20 بكسل؛

    قبل محاذاة مركز المحتوى الخاص بنا، نحتاج إلى ضبط ارتفاع النص وhtml على 100%. نظرًا لأنه يتم حساب الارتفاع بدون حشوة داخلية وخارجية (الحشوة والهامش)، فقد قمنا بتعيينها (الحشوة) على 0 بحيث لا توجد أشرطة تمرير.

    الهامش السفلي للعنصر "العائم" يساوي ناقص نصف ارتفاع المحتوى (400 بكسل)، أي -200 بكسل؛

    يجب أن تبدو صفحتك الآن كما يلي:

    #عرض العنصر المركزي 80%. وهذا يجعل موقعنا أضيق على الشاشات الصغيرة وأوسع على الشاشات الكبيرة. تبدو معظم المواقع غير لائقة على الشاشات العريضة الجديدة في الزاوية اليسرى العليا. تعمل خصائص الحد الأدنى للعرض والحد الأقصى للعرض أيضًا على تحديد صفحتنا بحيث لا تبدو واسعة جدًا أو ضيقة جدًا. لا يدعم Internet Explorer هذه الخصائص. تحتاج إلى ضبطه على عرض ثابت.

    نظرًا لأن العنصر #centered يحتوي على مجموعة الموضع: النسبي، فيمكننا استخدام الموضع المطلق للعناصر الموجودة بداخله. ثم قم بتعيين تجاوز السعة: تلقائي؛ لعنصر #content، بحيث تظهر أشرطة التمرير إذا كان المحتوى غير مناسب.

    الخطوه 3

    آخر شيء سنفعله هو إضافة بعض التصميم لجعل الصفحة تبدو أكثر جاذبية. لنبدأ بالقائمة.

    #nav ul (نمط القائمة: لا شيء؛ الحشو: 0؛ الهامش: 20px 0 0 0؛ المسافة البادئة للنص: 0؛) #nav li (الحشو: 0؛ الهامش: 3px؛) #nav li a (العرض: كتلة؛ لون الخلفية: #e8e8e8؛ الهامش: 0؛ الحد السفلي: 1 بكسل صلب: يمين؛ المحتوى: ""؛ وزن الخط: عريض؛ تعويم: يمين؛ الهامش: 0 2 بكسل 0 5 بكسل؛ f8f8f8؛ لون الحد السفلي : #777; ) #nav li a:hover::after ( الهامش: 0 0 0 7px; اللون: #f93; ) #nav li a:active ( الحشو: 8px 7px 7px; )

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

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

    شيء آخر مثير للاهتمام استخدمناه في القائمة هو الفئات الزائفة: قبل و: بعد. إنها تسمح لك بإضافة شيء ما قبل العنصر وبعده. تعد هذه طريقة جيدة لإضافة أيقونات أو رموز، مثل السهم الموجود في نهاية كل رابط. لا تعمل هذه الخدعة في Internet Explorer 7 والإصدارات الأقدم.

    الخطوة 4

    وأخيرًا وليس آخرًا، سنضيف بعض البراغي لتصميمنا لمزيد من الجمال.

    #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 ( عائلة الخط: Helvetica, Arial, sans- serif; الحشو العلوي: 0؛ ) #الجزء السفلي (الحشو: 10 بكسل؛ حجم الخط: 0.7em؛ اللون: #f03؛) #logo (حجم الخط: 2em؛ محاذاة النص: المركز؛ اللون: #999؛) #logo قوي ( وزن الخط: عادي؛ ) # امتداد الشعار ( العرض: كتلة؛ حجم الخط: 4em؛ ارتفاع الخط: 0.7em؛ اللون: #666؛ ) p، h2، h3 ( ارتفاع الخط: 1.6em؛ ) أ (اللون: #f03;)

    في هذه الأنماط قمنا بتعيين زوايا مستديرة للعنصر #centered. في CSS3، سيتم ذلك عن طريق خاصية border-radius. لم يتم تنفيذ هذا بعد في بعض المتصفحات، بخلاف استخدام البادئات -moz و -webkit لموزيلا فايرفوكس وSafari/Webkit.

    التوافق

    كما خمنت على الأرجح، المصدر الرئيسي لمشاكل التوافق هو Internet Explorer:

    • يجب أن يكون للعنصر #floater مجموعة عرض
    • يحتوي IE 6 على حشوة إضافية حول القوائم

    في كثير من الأحيان، يكون من الضروري في التخطيط توسيط بعض العناصر أفقيًا و/أو رأسيًا. لذلك، قررت أن أكتب مقالًا بطرق مختلفة للتوسيط، بحيث يكون كل شيء في متناول اليد في مكان واحد.

    هامش المحاذاة الأفقية: تلقائي

    يتم استخدام المحاذاة الأفقية باستخدام الهامش عندما يكون عرض العنصر المركزي معروفًا. يعمل لعناصر الكتلة:

    العنصر ( الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 50%؛ )

    تحديد تلقائي للهوامش اليمنى واليسرى يجعلها متساوية، مما يؤدي إلى توسيط العنصر أفقيًا داخل الكتلة الأصلية.

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

    هذه الطريقة مناسبة لتوسيط النص داخل الكتلة. محاذاة النص: المركز:

    المحاذاة مع محاذاة النص .wrapper ( محاذاة النص: المركز؛ )

    أنا مركز الانحياز

    الموقف والهامش السلبي الأيسر

    مناسبة للكتل المركزية ذات العرض المعروف. نعطي موضع الكتلة الأصلية: بالنسبة إلى الموضع بالنسبة إليه، موضع العنصر المركزي: مطلق، يسار: 50% وهامش يسار سلبي قيمته تساوي نصف عرض العنصر:

    المحاذاة مع الموضع .wrapper ( الموضع: نسبي؛ ) .wrapper p ( يسار: 50%؛ الهامش: 0 0 0 -100px؛ الموضع: مطلق؛ العرض: 200px; )

    أنا مركز الانحياز

    العرض: كتلة مضمنة + محاذاة النص: المركز

    هذه الطريقة مناسبة لمحاذاة الكتل ذات العرض غير المعروف، ولكنها تتطلب أصلًا مجمّعًا. على سبيل المثال، يمكنك توسيط القائمة الأفقية بهذه الطريقة:

    المحاذاة مع العرض: كتلة مضمنة + محاذاة النص: مركز؛ .navigation (محاذاة النص: المركز؛) .navigation li (العرض: كتلة مضمّنة؛)

    • بيت
    • عن المؤلف

    ارتفاع خط المحاذاة العمودية

    لمحاذاة سطر واحد من النص، يمكنك استخدام نفس قيم الارتفاع وتباعد الأسطر للكتلة الأصلية. مناسبة للأزرار وعناصر القائمة وما إلى ذلك.

    ارتفاع الخط .المغلف ( الارتفاع: 100 بكسل؛ ارتفاع الخط: 100 بكسل؛ )

    أنا الانحياز عموديا

    الموقف والهامش السلبي لأعلى

    يمكن محاذاة العنصر عموديًا عن طريق إعطائه ارتفاعًا ثابتًا وتطبيق الموضع: مطلق وهامش سلبي يساوي نصف ارتفاع العنصر الذي تتم محاذاته. يجب إعطاء الكتلة الأصلية الموضع: النسبي:

    الغلاف (الموضع: نسبي؛) العنصر (الارتفاع: 200 بكسل؛ الهامش: -100 بكسل 0 0؛ الموضع: مطلق؛ الأعلى: 50%؛)

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

    العرض: خلية الجدول

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

    عرض المحاذاة العمودية: خلية جدول .wrapper ( العرض: جدول؛ العرض: 100%؛ ) .خلية ( العرض: خلية جدول؛ الارتفاع: 100 بكسل؛ محاذاة رأسية: وسط؛ )

    أنا الانحياز عموديا

    المحاذاة الديناميكية لعنصر على الصفحة

    لقد بحثنا في طرق لمحاذاة العناصر على الصفحة باستخدام CSS. الآن دعونا نلقي نظرة على تنفيذ jQuery.

    لنقم بربط jQuery بالصفحة:

    أقترح كتابة دالة بسيطة لتوسيط عنصر ما في الصفحة، لنسميها alignCenter() . العنصر نفسه يعمل كوسيطة للوظيفة:

    الدالة alignCenter(elem) ( // الكود هنا )

    في نص الدالة، نقوم ديناميكيًا بحساب إحداثيات مركز الصفحة وتعيينها لخصائص CSS اليسرى والعليا:

    دالة alignCenter(elem) ( elem.css(( يسار: ($(window).width() - elem.width()) / 2 + "px"، أعلى: ($(window).height() - elem. height()) / 2 + "px" // لا تنس إضافة الموضع: المطلق للعنصر لتشغيل الإحداثيات )) )

    في السطر الأول من الدالة، نحصل على عرض المستند ونطرح منه عرض العنصر المقسم إلى نصفين - سيكون هذا هو المركز الأفقي للصفحة. السطر الثاني يفعل نفس الشيء، فقط مع الارتفاع للمحاذاة العمودية.

    الوظيفة جاهزة، كل ما تبقى هو إرفاقها بأحداث جاهزية DOM وتغيير حجم النافذة:

    $(function() ( // استدعاء وظيفة التوسيط عندما يكون DOM جاهزًا alignCenter($(elem)); // استدعاء الوظيفة عند تغيير حجم النافذة $(window).resize(function() ( alignCenter($(elem) ))) // وظيفة توسيط العنصر function alignCenter(elem) ( elem.css(( // حساب الإحداثيات اليسرى والعليا على اليسار: ($(window).width() - elem.width()) / 2 + " px"، أعلى: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

    تطبيق فليكس بوكس

    أصبحت ميزات CSS3 الجديدة، مثل Flexbox، شائعة بشكل تدريجي. تساعد هذه التقنية في إنشاء علامات دون استخدام العوامات وتحديد المواقع وما إلى ذلك. ويمكن استخدامه أيضًا لتوسيط العناصر. على سبيل المثال، قم بتطبيق Flexbox على العنصر الأصلي element.wrapper وقم بتوسيط المحتوى داخل:

    الغلاف (العرض: -webkit-box؛ العرض: -moz-box؛ العرض: -ms-flexbox؛ العرض: -webkit-flex؛ العرض: flex؛ الارتفاع: 500 بكسل؛ العرض: 500 بكسل؛) .wrapper .content (الهامش: تلقائي؛ /* الهامش: 0 تلقائي؛ أفقي فقط */ /* الهامش: عمودي فقط */ ) لوريم إيبسوم دولور سيت أميت

    تعمل هذه القاعدة على توسيط العنصر أفقيًا وعموديًا في نفس الوقت - لا يعمل الهامش الآن فقط للمحاذاة الأفقية، ولكن أيضًا للمحاذاة الرأسية. وبدون عرض/ارتفاع معروف.

    موارد ذات الصلة مساعدة المشروع

    مقالات مماثلة
أنواع
  • أجهزة التوجيه
  • الأقراص الصلبة
  • لا يتم تشغيله
  • الطابعات
  • الفرامل
  • يتجمد
  • الفيروسات
  • أجهزة لوحية
المواد شعبية
مقالات جديدة