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

محاذاة الكتل مع الأحجام المعروفة

أسهل طريقة لاستخدام CSS هي محاذاة المربعات ذات الارتفاع المحدد مسبقًا (للمحاذاة الرأسية) أو العرض (للمحاذاة الأفقية).

المحاذاة مع الحشو

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

على سبيل المثال ، هناك صورة 200 × 200 بكسل ، ونريد توسيطها في كتلة 240 × 300. يمكننا ضبط ارتفاع وعرض الكتلة الخارجية = 200 بكسل ، وإضافة 20 بكسل في الأعلى والأسفل ، و 50 على اليسار واليمين.

.example-wrapper1 (background: # 535E73 ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المساحة المتروكة: 20 بكسل 50 بكسل ؛)

محاذاة الكتل الموضوعة تمامًا

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

* هناك فارق بسيط: يجب ألا يتجاوز عرض (ارتفاع) الكتلة الداخلية + قيمة اليسار (يمين ، أسفل ، أعلى) حجم الكتلة الأصلية. من الآمن تعيين الخصائص اليسرى (اليمنى ، السفلية ، العلوية) على 0 (صفر).

.example-wrapper2 (position: النسبي ؛ الارتفاع: 250 بكسل ؛ الخلفية: url (space.jpg) ؛) 0 ؛ اليمين: 0 ؛ الهامش: تلقائي ؛ الخلفية: url (king.png) ؛)

محاذاة أفقية

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

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

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

.example-text (text-align: center ؛ padding: 10px ؛ background: # FF90B8 ؛)

تجدر الإشارة إلى أن هذه الخاصية لن تعمل فقط مع النص ، ولكن أيضًا مع أي عناصر مضمنة ("display: inline").

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

.example-wrapper3 (text-align: center؛ background: # FF90B8؛) .inline-text (display: inline-block؛ width: 40٪؛ padding: 10px؛ text-align: left؛ background: # FFE5E5؛)

محاذاة الكتل مع الهوامش

تتم محاذاة عناصر مستوى الكتلة ذات العرض المعروف بسهولة أفقيًا عن طريق تعيينها على "margin-left: auto؛ margin-right: auto". عادة ما يتم استخدام الاختصار: " الهامش: 0 تلقائي"(بدلاً من الصفر ، يمكن أن تكون هناك أي قيمة). ولكن بالنسبة للمحاذاة الرأسية ، لن تعمل هذه الطريقة.

.lama-wrapper (الارتفاع: 200 بكسل ؛ الخلفية: # F1BF88 ؛) .lama1 (الارتفاع: 200 بكسل ؛ العرض: 200 بكسل ؛ الخلفية: url (lama.jpg) ؛ الهامش: 0 تلقائي ؛)

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

انحياز عمودي

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

المحاذاة مع خاصية خط الطول

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

.example-wrapper4 (ارتفاع السطر: 100 بكسل ؛ اللون: # DC09C0 ؛ الخلفية: # E5DAE1 ؛ الارتفاع: 100 بكسل ؛ محاذاة النص: المركز ؛)

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

.example-wrapper5 (ارتفاع السطر: 160 بكسل ؛ الارتفاع: 160 بكسل ؛ حجم الخط: 0 ؛ الخلفية: # FF9B00 ؛) 1.5 ؛ المحاذاة الرأسية: الوسط ؛ الخلفية: # FFFAF2 ؛ اللون: # FF9B00 ؛ محاذاة النص: المركز ؛)

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

المحاذاة الرأسية في الجداول

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

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

.one_product .img_wrapper (display: table-cell؛ height: 169px؛ vertical-align: middle؛ overflow: hidden؛ background: #fff؛ width: 255px؛) .one_product img (max-height: 169px؛ max-width: 100 ٪ ؛ الحد الأدنى للعرض: 140 بكسل ؛ العرض: كتلة ؛ الهامش: 0 تلقائي ؛)

يجب أن نتذكر أنه إذا كان العنصر يحتوي على مجموعة "float" غير "none" ، فسيكون على شكل كتلة (display: block) على أي حال - ثم سيتعين عليك استخدام غلاف كتلة إضافي.

محاذاة مع عنصر مضمن إضافي

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

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

.example-wrapper6 (height: 300px؛ text-align: center؛ background: # 70DAF1؛) .pudge (display: inline-block؛ vertical-align: middle؛ background: url (pudge.png)؛ background-color: # fff ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛) .riki (العرض: كتلة مضمنة ؛ الارتفاع: 100٪ ؛ المحاذاة الرأسية: الوسط ؛)

العرض: المرن والمحاذاة

إذا كنت لا تهتم كثيرًا بمستخدمي Explorer 8 ، أو تهتم كثيرًا برغبتك في إضافة جزء من جافا سكريبت إضافي لهم ، فيمكن استخدام "display: flex". تتعامل المربعات المرنة مع مشكلات المحاذاة جيدًا ، ويكفي كتابة "margin: auto" لتوسيط المحتوى بالداخل.

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

.example-wrapper7 (display: flex؛ height: 300px؛ background: # AEB96A؛) .example-wrapper7 img (margin: auto؛)

حسنًا ، هذا كل ما أردت كتابته عن محاذاة CSS. الآن لن يكون تركيز المحتوى مشكلة!

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

1. محاذاة أفقية لمركز الكتلة / الصفحة

1.1 إذا كان للكتلة عرض:

div (العرض: 300 بكسل ؛ الهامش: 0 تلقائي ؛ / * توسيط العنصر أفقيًا داخل الكتلة الأصلية * /)

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

1.2 إذا تم تضمين كتلة في كتلة أخرى ولم يتم تعيين / عرض لها:

.wrapper (text-align: center ؛)

1.3 إذا كان للكتلة عرض وتحتاج إلى إصلاح في وسط الكتلة الأصلية:

.wrapper (position: النسبي ؛ / * اضبط المربع الأصلي على الموضع النسبي حتى نتمكن تمامًا من وضع المربع بداخله لاحقًا * /) .box (العرض: 400 بكسل ؛ الموضع: مطلق ؛ اليسار: 50٪ ؛ الهامش الأيسر: - 200 بكسل ؛ / * تحويل الكتلة إلى اليسار بمسافة تساوي نصف عرضها * /)

1.4 إذا لم يتم تعيين عرض للكتل ، فيمكنك توسيط باستخدام كتلة الغلاف الرئيسية:

.wrapper (text-align: center ؛ / * توسيط محتوى الكتلة * /) المسافة البادئة بين الكتل * /)

2. محاذاة عمودية

2.1. إذا احتل النص سطرًا واحدًا ، على سبيل المثال ، للأزرار وعناصر القائمة:

.button (الارتفاع: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛)

2.2. لمحاذاة كتلة عموديًا داخل الكتلة الأصلية:

.wrapper (position: النسبي ؛) .box (الارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ الهامش: -50 بكسل 0 0 0 ؛)

2.3 محاذاة عمودية حسب نوع الجدول:

.wrapper (display: table؛ width: 100٪؛) .box (display: table-cell؛ height: 100px؛ text-align: center؛ vertical-align: middle؛)

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

.wrapper (position: النسبي ؛) .box (الارتفاع: 100 بكسل ؛ العرض: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ هامش: تلقائي ؛ تجاوز: تلقائي ؛ / * إلى المحتوى لم ينتشر * /)

2.5 تحديد الموضع المطلق في وسط الصفحة / الكتلة باستخدام تحويل CSS3:

إذا كان العنصر له أبعاد

div (العرض: 300 بكسل ؛ / * ضبط عرض الكتلة * / الارتفاع: 100 بكسل ؛ / * ضبط ارتفاع الكتلة * / التحويل: ترجمة (-50٪ ، -50٪) ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ يسار: 50٪ ؛)

إذا كان العنصر ليس له أبعاد ولم يكن فارغًا

h1 (الهامش: 0 ؛ التحويل: ترجمة (-50٪ ، -50٪) ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ اليسار: 50٪ ؛)

المغلق ،

لغة البرمجة

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

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

دعنا نقارن الأساليب التالية. المحاذاة مع:

• الجداول،
• المسافة الفارغة،
• ارتفاع خط ،
• تمتد
• هامش سلبي ،
• تحول ،
• عنصر زائف
• فليكس بوكس.

كتوضيح ، ضع في اعتبارك المثال التالي.

يوجد عنصرا div ، أحدهما متداخل في الآخر. دعونا نعطيهم الفئات المناسبة - الخارجي والداخلي.

الهدف هو محاذاة العنصر الداخلي لمركز العنصر الخارجي.

بادئ ذي بدء ، ضع في اعتبارك الحالة عندما تكون أحجام الكتلة الخارجية والداخلية معروف. دعنا نضيف العرض: inline-block إلى العنصر الداخلي ، و text-align: center and vertical-align: في المنتصف إلى العنصر الخارجي.

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

دعنا نضبط أحجام الكتل ، وكذلك ألوان الخلفية لرؤية حدودها.

خارجي (العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ محاذاة النص: المركز ؛ المحاذاة الرأسية: الوسط ؛ لون الخلفية: #ffc ؛) الداخل (العرض: كتلة مضمنة ؛ العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ لون الخلفية : #fcc؛)
بعد تطبيق الأنماط ، سنرى أن الكتلة الداخلية تتم محاذاتها أفقيًا ، ولكن ليس عموديًا:
http://jsfiddle.net/c1bgfffq/

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

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

المحاذاة مع الجدول

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

http://jsfiddle.net/c1bgfffq/1/

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

يمكن إزالة أول ناقص جزئيًا عن طريق استبدال علامات الجدول و td بـ div وتعيين وضع عرض الجدول في CSS.

. router-wrapper (display: table؛) .outer (display: table-cell؛)
ومع ذلك ، فإن الكتلة الخارجية ستظل طاولة مع كل النتائج المترتبة على ذلك.

المحاذاة مع الحشو

إذا كانت ارتفاعات الكتلة الداخلية والخارجية معروفة ، فيمكن ضبط المحاذاة باستخدام الحشو الرأسي للكتلة الداخلية ، باستخدام الصيغة: (H خارجي - H داخلي) / 2.

خارجي (ارتفاع: 200 بكسل ؛) داخلي (ارتفاع: 100 بكسل ؛ الهامش: 50 بكسل 0 ؛)
http://jsfiddle.net/c1bgfffq/6/

عيب الحل هو أنه قابل للتطبيق فقط في عدد محدود من الحالات عندما تكون ارتفاعات كلتا الكتلتين معروفة.

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

إذا كنت تعلم أن الكتلة الداخلية يجب ألا تشغل أكثر من سطر واحد من النص ، فيمكنك استخدام خاصية ارتفاع السطر وتعيينها مساوية لارتفاع الكتلة الخارجية. نظرًا لأن محتوى الكتلة الداخلية يجب ألا يلتف إلى السطر الثاني ، فمن المستحسن إضافة مسافة بيضاء: nowrap and overflow: hidden rules أيضًا.

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (مسافة بيضاء: nowrap ؛ تجاوز: مخفي ؛)
http://jsfiddle.net/c1bgfffq/12/

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

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (ارتفاع الخط: عادي ؛ عرض: كتلة مضمنة ؛ محاذاة رأسية: وسط ؛)
http://jsfiddle.net/c1bgfffq/15/

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

امتداد المحاذاة

يمكن استخدام هذه الطريقة عندما يكون ارتفاع الكتلة الخارجية غير معروف ، لكن ارتفاع الكتلة الداخلية معروف.

لهذا تحتاج:

1. تعيين الوضع النسبي للكتلة الخارجية ، وتحديد المواقع المطلقة للكتلة الداخلية ؛
2. أضف القواعد أعلى: 0 وأسفل: 0 إلى الكتلة الداخلية ، ونتيجة لذلك ستمتد إلى الارتفاع الكامل للكتلة الخارجية ؛
3. اضبط القيمة على تلقائي للحشو الرأسي للكتلة الداخلية.

.outer (position: النسبي ؛) .inner (الارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ الهامش: تلقائي 0 ؛)
http://jsfiddle.net/c1bgfffq/4/

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

محاذاة مع قمة الهامش السلبية

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

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

خارجي (موضع: نسبي ؛). داخلي (ارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ قمة الهامش: -50 بكسل ؛)
http://jsfiddle.net/c1bgfffq/13/

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

المحاذاة مع التحويل

تشبه هذه الطريقة الطريقة السابقة ، ولكن يمكن تطبيقها عندما يكون ارتفاع الكتلة الداخلية غير معروف. في هذه الحالة ، بدلاً من تعيين حشوة سالبة بالبكسل ، يمكنك استخدام خاصية التحويل ورفع المربع الداخلي لأعلى باستخدام وظيفة translateY وقيمة -50٪.

خارجي (الموضع: نسبي ؛). داخلي (الموضع: مطلق ؛ أعلى: 50٪ ؛ تحويل: ترجمة Y (-50٪) ؛)
http://jsfiddle.net/c1bgfffq/9/

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

عيب هذه الطريقة هو أنه لا يمكن تطبيقها إذا كانت الكتلة الداخلية لها موضع مطلق.

المحاذاة مع Flexbox

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

يجب ضبط الكتلة الخارجية على العرض: flex ، ويجب ضبط الكتلة الداخلية على margin: auto. وهذا كل شيء! جميل، أليس كذلك؟

خارجي (عرض: مرن ؛ عرض: 200 بكسل ؛ ارتفاع: 200 بكسل ؛) داخلي (عرض: 100 بكسل ؛ هامش: تلقائي ؛)
http://jsfiddle.net/c1bgfffq/14/

عيب هذه الطريقة هو أن Flexbox مدعوم فقط من قبل المتصفحات الحديثة.

أي طريقة تختار؟

من الضروري الانطلاق من بيان المشكلة:

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

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

محاذاة أفقية

الهامش: تلقائي

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

العنصر (margin-left: auto ؛ margin-right: auto ؛ العرض: 50٪ ؛)

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

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

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

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

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

عرض: inline-block + text-align: center

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

• الصفحة الرئيسية
• عن المؤلف

انحياز عمودي

ارتفاع خط

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

المركز والهامش السلبي لأعلى

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

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

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

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

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

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

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

دعنا نضيف jQuery إلى الصفحة:

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

وظيفة alignCenter (إليم) (// كود هنا)

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

Function 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)) ؛)) // دالة توسيط العنصر alignCenter (elem) (elem.css ((// حساب الإحداثيات اليسرى والعلوية على اليسار: ($ (window) .width () - elem.width ()) / 2 + "بكسل" ، أعلى: ($ (نافذة) .height () - elem.height ()) / 2 + "بكسل"))))))

تطبيق Flexbox

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

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

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

موارد ذات الصلة

ساعد المشروع