المحاذاة الأفقية والرأسية للعناصر. توسيط div بالموضع: خاصية مطلقة أو ثابتة توسيط div

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

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

ملاحظة: يوجد أسفل كل حل قائمة بالمتصفحات التي تشير إلى الإصدارات التي يعمل بها كود CSS المحدد.

CSS - كتلة محاذاة للوسط

1. محاذاة كتلة واحدة إلى مركز أخرى. في هذه الحالة، الكتل الأولى والثانية لها أحجام ديناميكية.

... ...

الأصل ( الموضع: نسبي؛ ) .child ( الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 50%؛ -تحويل webkit: ترجمة(-50%، -50%)؛ -تحويل moz: ترجمة(-50% ، -50%)؛ -ms-transform: ترجمة (-50%، -50%)؛ ;)

• كروم 4.0+
• فايرفوكس 3.6+
• إنترنت إكسبلورر 9+
• أوبرا 10.5+
• سفاري 3.1+

2. محاذاة كتلة واحدة إلى مركز أخرى. في هذه الحالة، الكتلة الثانية لها أبعاد ثابتة.

الأصل ( الموضع: نسبي؛ ) .الطفل ( الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 50%؛ /* عرض وارتفاع كتلتين */ العرض: 500 بكسل؛ الارتفاع: 250 بكسل؛ /* يتم تحديد القيم اعتمادًا على على حجمه */ /* هامش اليسار = - العرض / 2 */ هامش اليسار: -250px; /* هامش أعلى = - ارتفاع / 2 */ هامش أعلى: -125 بكسل )

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 1.0+
• إنترنت إكسبلورر 4.0+
• أوبرا 7.0+
• سفاري 1.0+

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

الأصل ( الموضع: نسبي؛ ) .الطفل ( الموضع: مطلق؛ /* عرض وارتفاع كتلتين في % */ الارتفاع: 50%; العرض: 50%; /* يتم تحديد القيم اعتمادًا على حجمها في % * / اليسار: 25%؛ /* (100% - العرض) / 2 */ الأعلى: 25%؛ /* (100% - الارتفاع) / 2 */ )

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 1.0+
• إنترنت إكسبلورر 4.0+
• أوبرا 7.0+
• سفاري 1.0+

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

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

... ...

كتلة ( الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ )

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 1.0+
• إنترنت إكسبلورر 6.0+
• أوبرا 3.5+
• سفاري 1.0+

2. محاذاة عنصر الخط (العرض: مضمّن) أو عنصر كتلة الخط (العرض: مضمّن) أفقيًا:

... ...

الأصل (محاذاة النص: المركز؛) .الطفل (العرض: كتلة مضمنة؛)

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 3.0+
• إنترنت إكسبلورر 8.0+
• أوبرا 7.0+
• سفاري 1.0+

CSS - المحاذاة العمودية

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

... ...

الأصل (ارتفاع الخط: 500 بكسل؛) .الطفل (العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛)

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 3.0+
• إنترنت إكسبلورر 8.0+
• أوبرا 7.0+
• سفاري 1.0+

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

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

المتصفحات التي تدعم هذا الحل:

• كروم 1.0+
• فايرفوكس 1.0+
• إنترنت إكسبلورر 8.0+
• أوبرا 7.5+
• سفاري 1.0+

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

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

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

ماذا تختار من أو الأساليب

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

• طريقة "تعويم".
• طريقة "الكتلة المضمنة".
• طريقة خلية الجدول

ولكل منهم مزاياه وتطبيقاته وعيوبه. دعونا ننظر إليهم بالترتيب.

"من أجل اختراق" أو القليل من النظرية

يمكن تقسيم جميع العناصر الهيكلية لـ HTML إلى:

مضمن (مدمج) - النوع إم جي، سبانوما شابه. ليس لدينا القدرة على تغيير خلفيتهم أو منحهم أبعادًا خطية اعتباطية.

كتلة - تشغل كامل عرض الكتلة الأصلية، وتبدأ دائمًا بسطر جديد - ص، ح، شعبة.

فيما يلي مثال مرئي للهياكل المضمنة والكتلة:

طريقة تعويم

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

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

خاصية CSS يطفواكتسبت شعبية كبيرة وقيمة عملية بعد الانتقال من طريقة التخطيط الجدولي إلى طريقة الكتلة.

تعويم: يسار (يمين) يحول عنصر كتلة إلى عائم، ويحاذيه مع الحافة اليسرى (اليمنى) للكتلة الأصلية، ويضبط النص والعناصر الأخرى لتطفو إلى اليمين (يسار).

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

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >نحن نبني< div class = "bblock" >أفقي< div class = "bblock" >صف< div class = "bblock" >من المغنيات

وورقة أنماط خارجية تحتوي على المحتوى التالي:

div ( تعويم: يسار؛ / * تعيين التغليف * / ارتفاع الخط: 120 بكسل؛ حجم الخط: 40 بكسل؛ الخلفية: dodgerblue؛ اللون: أبيض؛ الهامش العلوي: 60 بكسل؛ العرض: 320 بكسل؛ / * إصلاح عرض حاجز*/ )

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

في بعض الأحيان يكون من الضروري عمليًا محاذاة الكتل إلى الحافة اليمنى للعنصر الأصلي. دعونا نغير التدفق حول الكتل في المثال السابق:

تعويم: حق؛

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

من أجل مقاطعة تدفق العناصر من مكان معين، استخدم السطر:

< div style= "clear: both;" >

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

خوارزمية الإجراءات هي كما يلي.

< div class = "wrap" > < div class = "bblock" >نحن نبني< div class = "bblock" >أفقي< div class = "bblock" >صف< div class = "bblock" >من المغنيات

التفاف ( العرض: 1310 بكسل; /*إصلاح عرض الغلاف*/ الهامش: 0 تلقائي; /*توسيطه*/ الخلفية: رمادي غامق; الارتفاع: 120 بكسل; /*ضبط ارتفاع الغلاف*/ ) . bblock (طفو: يسار؛ /*ضبط التغليف*/ ارتفاع الخط: 120 بكسل؛ /*ارتفاع الخط + توسيط النص عموديًا*/ حجم الخط: 40 بكسل؛ الخلفية: dodgerblue؛ اللون: أبيض؛ العرض: 320 بكسل؛ /*إصلاح عرض الكتلة*/ الهامش- اليمين: 10 بكسل محاذاة النص: المركز /*توسيط النص أفقيًا*/ ) . التفاف: آخر فرعي ( الهامش الأيمن: 0px; /*إزالة هامش القسم الأخير*/ )

ونتيجة لذلك نحصل على الصورة التالية:

حسنًا، لا يمكنك النظر في جميع المواقف العملية، لذلك دعنا ننتقل إلى الميزات العامة.

مهم!!!

طريقة "الكتلة المضمنة".

تتمتع كل من العناصر المضمنة والكتلة بمزاياها وعيوبها في سياق كل مهمة محددة يتم حلها. ماذا لو قمت بدمج مزاياها؟

تعرف على أهم ما يميز البرنامج - الملكية العرض: كتلة مضمنة.

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

يحتوي عنصر خط الكتلة على الخصائص التالية:

• يتم تحديد ارتفاع وعرض الكتلة تلقائيًا بناءً على المحتوى وقيمة الحشو ( حشوة)
• يمكن ضبط ارتفاع وعرض الكتلة بشكل ثابت
• ليس هناك أي تأثير لانهيار الحدود.

دعونا نلقي نظرة على مثال لإنشاء قائمة تنقل بسيطة تحتوي على صورة ورابط.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >رابط القائمة 1 أطول من المعتاد< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >رابط القائمة 2< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >رابط القائمة 3< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >رابط القائمة 4

التنقل ( العرض: كتلة مضمنة؛ / * تعيين عرض خط الكتلة * / العرض: 180 بكسل؛ / * ضبط عرض الكتلة * / الخلفية: dodgerblue؛ ) . سلسلة (محاذاة النص: المركز؛ /*محاذاة النص أفقيًا*/)

ونتيجة لذلك نحصل على القائمة التالية:

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

محاذاة رأسية: أعلى؛

أصبح شريط التنقل الآن محاذيًا للسطر العلوي:

بالطبع المثال المقدم بدائي، لكنني متأكد من أنه بناءً عليه يمكنك إنشاء تحفة حقيقية !!!

مهم!!!

• بالنسبة للإصدارات الأقدم من Firefox، أضف السطر:
  

  عرض: - moz-inline-stack؛

  
  ولف العنصر في غلاف div إضافي.
• IE 7 والإصدارات السابقة - أضف الأسطر:
  

  التكبير: 1؛

• /*ضبط hasLayout*/ * العرض: مضمن؛

/*العلامة النجمية - اختراق IE */ _height: 250px;

/*min-height لا يعمل في IE6*/

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

خلية الجدول طريقة الجدولمضمنة الجدول )، يسمح لك بإجراء تنسيق جدولي للعناصر دون استخدام جداول HTML.:

< div class = "wrap" > < div class = "bblock" >نحن نبني< div class = "bblock" >لوضع الكتل أفقيًا، نحتاج إلى عنصر أصل له الخاصية< div class = "bblock" >صف< div class = "bblock" >والعناصر الفرعية (الخلايا) التي لها الخاصية

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

مهم!!!

على عكس طريقتي "Inline-block" و"float"، عند تقليل عرض نافذة متصفح الويب، لا تتحرك الخلايا لأسفل.

ليس لديك القدرة على تعيين خاصية الهامش للخلايا الزائفة.

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

في كثير من الأحيان تكون المهمة هي محاذاة كتلة في وسط الصفحة / الشاشة، وحتى بدون برنامج 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.
مثال مع صورة كبيرة:

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

مزايا التخطيط باستخدام العلامة

هناك نوعان رئيسيان من بنية موقع الويب:

• مجدول؛
• حاجز.

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

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

بالإضافة إلى سرعة التحميل العالية، يسمح لك إنشاء موقع ويب بتقليل كمية كود HTML عدة مرات. بما في ذلك من خلال استخدام فئات CSS.

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

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

مساعدات تحديد المواقع

في تخطيط الكتلة، من الأفضل وضع الطبقات باستخدام أوراق الأنماط المتتالية. خاصية CSS الرئيسية المسؤولة عن التخطيط هي خاصية float.
بناء جملة الخاصية:
تعويم: يسار | حق | لا شيء | يرث
أين:

• يسار - قم بمحاذاة العنصر إلى الحافة اليسرى من الشاشة. يحدث التدفق حول العناصر المتبقية على اليمين؛
• اليمين - المحاذاة على اليمين، والتدفق حول العناصر الأخرى - على اليسار؛
• لا شيء - الالتفاف غير مسموح به؛
• يرث - يرث قيمة العنصر الأصلي.

دعونا نلقي نظرة على مثال خفيف لتحديد موضع div باستخدام هذه الخاصية:

#left ( العرض: 200px؛ الارتفاع: 100px؛ float: يسار؛ الخلفية: rgb(255,51,102);) #right (العرض: 200px; الارتفاع: 100px; float: يمين; الخلفية: rgb(0,255,153); ) الكتلة اليسرى الكتلة اليمنى

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

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

طبقات توسيط

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

#container (العرض: 600 بكسل؛ الهامش: 0 تلقائي؛) #left (العرض: 200 بكسل؛ الارتفاع: 100 بكسل؛ تعويم: يسار؛ الخلفية: rgb(255,51,102);) #يمين (العرض: 200 بكسل; الارتفاع: 100 بكسل; تعويم : اليسار؛ الخلفية: rgb(0,255,153); #center (العرض: 200 بكسل; الارتفاع: 100 بكسل; تعويم: يسار; الخلفية: rgb(255,0,0);) الكتلة اليسرى الكتلة اليمنى

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

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

في المثال التالي، استخدمنا عددًا من خصائص CSS الجديدة لتوسيط الطبقات داخل الحاوية:

#container (العرض: 450 بكسل؛ الارتفاع: 150 بكسل؛ الهامش: 0 تلقائي؛ لون الخلفية: #66CCFF؛) #left (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: rgb(255,51,102); العرض: كتلة مضمنة; محاذاة رأسية: وسط؛ الهامش الأيسر: 35 بكسل؛ ) #يمين (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: rgb(0,255,153)؛ العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛ الهامش الأيسر: 35 بكسل;) #center (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: rgb(255,0,0)؛ العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛ الهامش الأيسر: 35 بكسل؛)

وصف مختصر لخصائص CSS وقيمها التي استخدمناها في هذا المثال لتوسيط div داخل div:

• العرض: inline-block - يقوم بمحاذاة عنصر الكتلة في سطر ويضمن التفافه حول عنصر آخر؛
• Vertical-align: middle - يقوم بمحاذاة العنصر الموجود في المنتصف بالنسبة إلى العنصر الأصلي؛
• هامش اليسار - يضبط الهامش الأيسر.

كيفية عمل رابط من الطبقة

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

#layer1 (العرض: 500 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: rgb(51,255,204); الحدود: الأخدود;) أ (العرض: كتلة؛ محاذاة النص: المركز؛ الارتفاع: 100%؛ اللون: rgb(255,0,51) ;) رابط لموقعنا

في هذا المثال، باستخدام خط العرض: الكتلة، قمنا بتعيين الارتباط لقيمة عنصر الكتلة. ولكي يصبح الارتفاع الكامل لكتلة div رابطًا، اضبط الارتفاع على 100%.

إخفاء وإظهار عناصر الكتلة

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

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

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

#layer1( العرض:block; العرض: 500px; الارتفاع: 100px; الخلفية: rgb(51,255,204); الحدود:groove; ) عرض الوظيفة() ( if(layer1====none") (layer1==block"; ) else (layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

هذا هو الزر السحري. سيؤدي النقر عليه إلى إخفاء أو إظهار كتلة الإخفاء.

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

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

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

رأس الموقع

محتوى

أسفل الموقع

باستخدام هذا الهيكل كمثال، سننظر في عدة خيارات.

تخطيط وتمركز موقع المطاط

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

لذلك، سيكون عرض كتل "الرأس" و"التذييل" 100% من عرض الشاشة. دع عرض كتلة "القائمة" يكون 30٪، ويجب أن تكون كتلة "المحتوى" موجودة بجوار كتلة "القائمة"، أي. يجب أن يكون لها هامش أيسر (الهامش الأيسر) بعرض يساوي عرض كتلة "القائمة"، أي. 30%.

لجعل كتل "القائمة" و"المحتوى" جنبًا إلى جنب، فلنجعل كتلة "القائمة" عائمة وندفعها إلى الحافة اليسرى. سنقوم أيضًا بتعيين ألوان الخلفية للكتل الخاصة بنا. الآن دعونا نكتب كل هذا في ورقة الأنماط (في صفحة style.css)

#header( الخلفية:#3e4982; العرض: 100%; الارتفاع: 110 بكسل; محاذاة النص: المركز; اللون:#FFFFFF; حجم الخط: 24px; الحشو العلوي: 40px; ) #menu( الخلفية:#6173cb; float :left width:300px; text-align:center; #3e4982؛ واضح: كلاهما؛ العرض: 100%؛ الارتفاع: 50 بكسل؛ اللون: #FFFFFF؛

تم ضبط ارتفاع الكتل بشكل مشروط بحيث تكون النتيجة مرئية. أنظر إلى صفحتنا في متصفحك:

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

... #menu( الخلفية:#6173cb; تعويم: يسار; العرض: 200px; الارتفاع: 300px; ) #content( الخلفية:#ffffff; هامش اليسار:200px; الارتفاع:300px; ) ...

الآن تمتد صفحتنا بشكل طبيعي أكثر. باستخدام التخطيط المرن، تشغل الصفحات عرض الشاشة بالكامل، لذا لا يلزم محاذاة الصفحة.

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

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

تخطيط وتمركز الموقع، عرض ثابت

في هذه الحالة، سيتعين علينا تعيين أحجام ثابتة للكتل لدينا:

#main (العرض: 800 بكسل؛) #header (الخلفية: #3e4982؛ العرض: 800 بكسل؛ الارتفاع: 150 بكسل؛ محاذاة النص: المركز؛ اللون: #FFFFFF؛ حجم الخط: 24 بكسل؛ الحشو العلوي: 40 بكسل؛) #menu ( الخلفية: #6173cb؛ تعويم: يسار؛ العرض: 200 بكسل؛ الارتفاع: 300 بكسل؛ محاذاة النص: المركز؛ اللون: #FFFFFF؛ حجم الخط: 18 بكسل؛ الحشو العلوي: 10 بكسل؛ ) #content( الخلفية:#ffffff; الهامش الأيسر: 200 بكسل؛ الارتفاع: 300 بكسل؛ محاذاة النص: المركز) #footer( الخلفية:#3e4982; واضح: كلاهما; العرض: 800 بكسل; الارتفاع: 50 بكسل; محاذاة النص: المركز; اللون:#FFFFFF; الخط- الحجم: 14 بكسل؛

الآن يتم الضغط على صفحتنا على الحافة اليسرى من الشاشة.

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

لنفعل ذلك: امنح العلامة "body" عرضًا يبلغ 800 بكسل (مثل الكتلة "الرئيسية") ومساحة يسار قدرها 50%. بعد ذلك سيتم عرض محتويات الكتلة "الرئيسية" بالكامل على الجانب الأيمن من الشاشة (أي من المنتصف إلى اليمين):

لكي تكون الكتلة "الرئيسية" موجودة في منتصف الشاشة، يجب أن يتطابق وسطها مع منتصف علامة "الجسم". أولئك. تحتاج إلى تحويل الكتلة "الرئيسية" إلى اليسار بمقدار نصف حجمها. يبلغ عرض الكتلة "الرئيسية" 800 بكسل، مما يعني أنك بحاجة إلى تعيين الخاصية "margin-left:-400px" إليها. نعم، يمكن أن تأخذ هذه الخاصية قيمًا سالبة، ثم يتم تقليل الهامش الأيسر (أي إزاحته إلى اليسار). وهذا هو بالضبط ما نحتاجه.

تبدو ورقة الأنماط الآن كما يلي:

الجسم (العرض: 800 بكسل؛ مساحة اليسار: 50%؛) #main (العرض: 800 بكسل؛ الهامش الأيسر: -400 بكسل؛) #header (الخلفية: #3e4982؛ العرض: 800 بكسل؛ الارتفاع: 150 بكسل؛ محاذاة النص: المركز اللون:#FFFFFF;حجم الخط:24px; حجم الخط: 18 بكسل؛ الحشو العلوي: 10 بكسل؛ ) #content( الخلفية:#ffffff; الهامش الأيسر: 200 بكسل; الارتفاع: 300 بكسل; محاذاة النص: المركز;) #footer( الخلفية:#3e4982; واضح: كلاهما; العرض: 800 بكسل؛ محاذاة النص: المركز؛ حجم الخط: 14 بكسل؛

وتقع صفحتنا في المتصفح في المنتصف تمامًا:

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

حظا سعيدا لك في سعيكم الإبداعي!



إذا وجدت هذا الموقع مفيدًا، فيرجى مراجعة موقعنا الآخر