كيفية توسيط Div أو نص داخل Div باستخدام CSS

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

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

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

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

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

التوسيط باستخدام Flexbox

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

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

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

إذا كان العنصر span أو عنصر مضمن آخر، عاملها كعنصر flex من خلال تكييف الحاوية بحيث يتم وضع span داخل التدفق؛ هذا يحافظ على المحاذاة المتوقعة بينما يظل النص متاحًا.

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

توسيط كتلة أفقيًا باستخدام margin: auto

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

ما تحتاجه لتحقيق النجاح:

• عنصر على مستوى الكتلة أو عنصر يُعامل ككتلة في التدفق
• عرض محدد (بكسل أو max-width بقيمة محددة)
• margin-left: auto و margin-right: auto
• حاوية مضيفة بعرض متاح
• اختياري: max-width للسلوك المتجاوب

كيفية التنفيذ بشكل نظيف:

1. ضبط العنصر على display: block (أو التأكد من أنه يتصرف ككتلة في التخطيط).
2. حدد عرضًا أقل من عرض الوالد، بحيث تكون للهوامش التلقائية مساحة للتنفس.
3. طبّق margin-left: auto و margin-right: auto؛ هذا ينشئ مساحة متساوية على كلا الجانبين ويضع الكتلة في الوسط.
4. إذا كانت الحاوية قد تتقلص، فكر في max-width وعروض النسب المئوية للحفاظ على المظهر دون تجاوز.
5. تجنب التموضع المطلق ما لم تكن تنوي التداخل؛ يعمل التوسيط القائم على الهوامش بشكل أفضل داخل التدفق الطبيعي.

ملاحظات تستحق النظر:

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

أمثلة (كود يمكن إعادة استخدامه):

1. كتلة بعرض ثابت مركزة: width: 320px; margin-left: auto; margin-right: auto; display: block;
2. عرض سائل مع حد أقصى: width: 60%; max-width: 600px; margin-left: auto; margin-right: auto; display: block;
3. سياق الشبكة (مع الحفاظ على التدفق): parent { display: grid; grid-template-columns: 1fr; } .child { width: 480px; margin-left: auto; margin-right: auto; }
4. محاذاة تشبه خلية الجدول في تخطيط تاريخي: wrapper { display: table; width: 100%; } .child { display: table-cell; width: 320px; text-align: left; margin: 0 auto; }

نصائح عملية:

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

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

توسيط نص مضمن باستخدام text-align: center

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

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

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

من اليمين إلى اليسار: تعمل نفس المحاذاة الأفقية للغات التي تتدفق من اليمين إلى اليسار، مع الحفاظ على المحاذاة بينما يتغير ترتيب المحتوى.

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

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

التكتيكات والخطط: لتباعد رأسي متسق وخطوط متوازنة رأسيًا، زد مع line-height، ومقاييس الخط، والتباعد بين الكتل المجاورة.

نصائح: يمكنك التجربة باستخدام margin-left في سياقات حيث يجب محاذاة عنصر ثانوي بصريًا؛ يمكن أن يساعد تحويل إلى inline-block أو كتلة موجهة في السيطرة على النتيجة؛ الهدف هو الحفاظ على كل شيء محاذى ومتباعدًا بالتساوي.

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

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

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

توسيط سطر واحد رأسيًا باستخدام Flexbox على الوالد

التوصية: استخدم حاوية flex على الكتلة الخارجية واضبط align-items: center لوضع سطر واحد على طول الوسط الرأسي. أعطِ الغلاف ارتفاعًا ثابتًا (على سبيل المثال 60 بكسل) لإنشاء مساحة مرئية. مثال: style="display:flex; align-items:center; height:60px; border:1px solid #ddd; background:#f7f7f7;" سيكشف عن المحاذاة بوضوح ويحافظ على السطر الداخلي كعنصر مضمن واحد، تجنبًا للنمو إلى خطوط متعددة.

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

التعديل الدقيق: إذا كانت الخطوط أو الرندرينج تتطلب دفعات إضافية، يمكنك تطبيق transform translate-50 على حاوية السطر لضبط خط الأساس؛ على الرغم من أن المحاذاة الافتراضية لـ flex عادةً كافية. يتفاعل الارتفاع المحسوب و line-height للحفاظ على محاذاة السطر عبر الأجهزة؛ في الممارسة، يتوسع هذا النهج مع تخطيط نامٍ ويترجم جيدًا في خلفية هياكل أكثر تعقيدًا مثل منطقة تشبه الجدول. Quis nulla facilis est؟ الإجابة تكمن في الاستخدام المتسق لإعداد المحاذاة واختبار مفصل في سيناريوهات حقيقية؛ يساعد هذا الفصل في كشف التأثير المثبت عبر مجموعة من السياقات.

توسيط طفل موضع مطلقًا باستخدام transform على حاوية نسبية

التوصية: اضبط الوالد على position: relative؛ الطفل على position: absolute؛ top: 50%؛ left: 50%؛ transform: translate(-50%, -50%)؛ هذا يضع عنصرًا واحدًا بالضبط في منتصف الحاوية، مع الحفاظ على محاذاة الحافة.

لماذا يعمل هذا: يحول transform بنصف عرضه وارتفاعه الخاص، مما ينتج إزاحة محسوبة تضع مرساة العنصر في منتصف الحاوية؛ على الرغم من اختلاف الأحجام، تظل النتيجة متوقعة للعنصر الواحد.

دعم RTL: للتخطيطات من اليمين إلى اليسار، احتفظ بـ left: 50% وطبّق translateX(-50%)؛ في كلا الاتجاهين تظل النتيجة محاذاة؛ إذا كان التسخين مفضلاً، قم بالتبديل إلى right: 50% مع ترجمة مرآة.

المحاذاة الرأسية: top: 50% مدمج مع translateY(-50%) يتعامل مع المحور الرأسي؛ للمحاذاة الأفقية فقط، استخدم translateX(-50%). الكلمة الرئيسية هنا هي المحاذاة، وستساعد نفس الحيلة في المحاذاة على طول كلا المحورين.

قيود التخطيط: يمكن أن يتصادم طفل طافٍ أو مضمن مع التدفق الطبيعي؛ تأكد من أن الطفل display: block لمنع الانجراف؛ إذا كان عرض أو ارتفاع fit-content مطلوبًا، لا تزال الإزاحات المحسوبة تنطبق؛ على الرغم من أنك قد ترغب في تضمين حشوات nulla للمحتوى الفارغ.

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

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

توسيط المحتوى باستخدام CSS Grid باستخدام place-items

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

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

يتحرك المحتوى على مستوى الكتلة داخل الشبكة بشكل متوقع. أعد استخدامه على غلاف فئة hubspot وطبّقه عبر نقاط التوقف المحددة؛ يظل التوسع سلسًا مع تغيير نافذة العرض.

مقارنة بـ flexbox، لا يعتمد هذا النهج على توزيع المساحة بين الإخوة؛ على الرغم من أنك يمكنك دمجه مع استراتيجية مسار مضمن، تظل المحاذاة متسقة.

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

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