تحديد المستوى والأفق في CSS

عنصر مركز

العنصر المركزي بشكل أفقي وعمودي

وضع العنصر في منتصف الصف

للحصول على وسط العنصر المضمن (مثل <div>) بشكل أفقي، استخدم هوامش: auto;.

تحديد عرض العنصر سيمنع من التمدد إلى حواف الصندوق.

ثم، سيأخذ العنصر عرضه المحدد، وسيوزع المساحة المتبقية بشكل متساوٍ بين الهوامش الخارجية

عنصر div هذا هو مركزي.

مثال

.center {
  هوامش: auto;
  عرض: 50%;
  border: 3px solid green;
  ملء: 20px;
}

جرب بنفسك

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

وضع النص في منتصف الصف

إذا كنت ترغب فقط في وسط النص داخل العنصر، استخدم تحجيم نص: منتصف;:

هذا النص هو مركزي.

مثال

.center {
  تحجيم نص: منتصف;
  border: 3px solid green;
}

جرب بنفسك

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

وضع الصورة في منتصف الصف

إذا كنت ترغب في وسط الصورة، يرجى إعداد الهوامش الخارجية للجوانب auto، وإعدادها ككتلة:

مثال

img {
  عرض: كتلة;
  هوامش يسار: تلقائي;
  هوامش يمين: تلقائي;
  عرض: 40%;
}

جرب بنفسك

تحجيم يسار ويمين - استخدم التوجيه

طريقة أخرى لتوجيه العناصر هي استخدام الوضع: مطلق; :

هذا div منسق إلى اليمين.

مثال

.right {
  الوضع: مطلق;
  يمين: 0px;
  عرض: 300px;
  الحدود: 3px خط مائل #73AD21;
  ملء: 20px;
}

جرب بنفسك

ملاحظة:العناصر الموجودة في التوجيه المطلق تُزال من التدفق العادي وقد تظهر تلاشي العناصر.

تحجيم يسار ويمين - استخدم طوفئة

طريقة أخرى لتوجيه العناصر هي استخدام طوفئة سمة:

مثال

.right {
  طوفئة: يمين;
  عرض: 300px;
  الحدود: 3px خط مائل #73AD21;
  ملء: 10px;
}

جرب بنفسك

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

خدعة clearfix

ثم يمكننا إضافة السيطرة على التدفق: تلقائي;، لحل هذه المشكلة:

مثال

.clearfix {
  السيطرة على التدفق: تلقائي;
}

جرب بنفسك

تحجيم عمودي - استخدم ملء

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

أنا منتصف العمودي.

مثال

.center {
  ملء: 70px 0;
  border: 3px solid green;
}

جرب بنفسك

إذا كنت ترغب في تحجيم عمودي و أفقي في نفس الوقت، استخدم ملء و تحجيم نص: منتصف;:

أنا مركزت أفقيًا وعلى طول.

مثال

.center {
  ملء: 70px 0;
  border: 3px solid green;
  تحجيم نص: منتصف;
}

جرب بنفسك

تحجيم عمودي - استخدم خط العرض

إحدى الحيل هي استخدامقيمتهيساوي الارتفاع قيمة السمة خط العرض سمة:

أنا مركزت أفقيًا وعلى طول.

مثال

.center {
  خط العرض: 200px;
  height: 200px;
  border: 3px solid green;
  تحجيم نص: منتصف;
}
/* إذا كان هناك نص متعدد السطور، يرجى إضافة الكود التالي: */
.center p {
  خط العرض: 1.5;
  عرض: داخل-كتلة;
  تحجيم عمودي: منتصف;
}

جرب بنفسك

تحجيم عمودي - استخدم position و transform

إذا لم يكن اختيارك ملء و خط العرض،إذن الحل الآخر هو استخدام الوضع و تحويل سمة:

أنا مركزت أفقيًا وعلى طول.

مثال

.center { 
  height: 200px;
  الوضع: نسبي;
  border: 3px solid green; 
}
.center p {
  الحدود: 0;
  الوضع: مطلق;
  العمودي: 50%;
  اليسار: 50%;
  تحويل: تثبيت(-50%, -50%);
}

جرب بنفسك

إشارة:سوف تتعلم في تحويلات 2D سوف تتعلم المزيد عن خاصية transform في هذا الفصل.

التثبيت العمودي - باستخدام Flexbox

يمكنك أيضًا استخدام flexbox لتقليل المحتوى. يرجى ملاحظة أن IE10 والإصدارات الأقدم لا تدعم flexbox:

أنا مركزت أفقيًا وعلى طول.

مثال

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

جرب بنفسك

إشارة:سوف تتعلم في Flexbox CSS سوف تتعلم المزيد عن Flexbox في هذا الفصل.