⚠ اصحي للكلام يا صاحبي ✋

1 نصيحة : دائما عند توسيط العناصر استخدم الكود التالي Border: 4px solid red; لمعرفة حدود العنصر حتى يتم التحكم به بشكل كامل

2 يوجد فرق كبير بين توسيط عنصر ال html و توسيط المُحتوى (text) داخل هذا العنصر

3 من المعروف ان جميع عناصر ال html تنقسم الى عناصر block و عناصر inline

-العناصر الـــــ block يكون عرضها هو العرض الكلي للعنصر الأب

-العناصر الـــــ inlineو العناصر الـــــ inline-block يتحدد عرضها علي حسب المُحتوي الذي بداخلها

توسيط العناصر افقياً

1- توسيط المُحتوي (text) داخل عنصر block

وذلك عن طريق الكود التالي: text-align: center;

2- إذا كان العنصر block

فيتم إضافة له الاكواد الأتية:
Width: ***;
margin-left: auto;
margin-right: auto;

⚠ هذه الاكواد تقوم بتوسيط العنصر وليس ال text الذي بداخل هذا العنصر.
ولكن إذا أردنا أيضا توسيط ال text الذي بداخل العنصر فنستخدم text-align: center;

3- توسيط أكثر من عنصر block
5.1- الطريقة الاولي

- وذلك عن طريق وضع هذه العناصر الــ block داخل عنصر اب ونضع الكود التالي للعنصر الاب text-align: center;

- ثم نضع الكود التالي للعناصر الـــ child display: inline-block;

5.2- الطريقة الثانية بإستخدام الـــــ grid

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
display: grid;
justify-content: center;

5.3- الطريقة الثالثة بإستخدام الـــــ flexbox

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
display: flex;
justify-content: center;

4- توسيط الصورة افقياً

وإذا أردنا توسيط صورة افقيا فنضيف لها الاكواد التالية 👇 لان الصورة عنصر inline-block
img {
   display: block;
   margin-left: auto;
   margin-right: auto;
    }

5- إذا كان العنصر inline

مثال علي ذلك؛ عنصر ال <a> هو عنصر inline
فنضع له عنصر اب يكون block ونضيف للعنصر الاب هذا الكود text-align: center;
مثال علي ذلك:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        div{text-align: center;}
    </style>
  </head>
  
  <body>
    <div>
      <a href=""> This is link </a>
    </div>
  </body>
</html>

هذه الطريقة تعمل مع العناصر ال inline وايضاً العناصر ال inline-block

⚠ في الفيديو الخاص بهذا الدرس سيتم شرح مثال مهم عن توسيط العناصر افقيا بإستخدام خاصية الــ fit-content وعلاقتها بـــ margin-right: auto; و margin-left: auto;

توسيط العناصر رأسياً

1- توسيط المُحتوي (text) داخل عنصر block او inline

أفضل طريقة هي ان تكون قيمة الــــ padding-top تساوي قيمة الــــــــ padding-bottom

⚠ اذا كان العنصر inline فنضع له display: inline-block لتجنب مشاكل ال inline

2- إذا كان العنصر inline او block
2.1- باستخدام خاصية ال flexbox

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

2.2- باستخدام خاصية ال grid

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
.parent {
     display: grid;
     align-content: center; }

توسيط العناصر رأسياً وأفقياً

1- توسيط المُحتوي (text) داخل عنصر block

- أولا تكون قيمة الــــ padding-top تساوي قيمة الــــــــ padding-bottom
- ثانيا نضيف الكود التالي text-align: center;

2- توسيط المُحتوي (text) داخل عنصر inline

وإذا كان عنصر inline ف عرض العنصر يتحدد علي حسب المُحتوي الذي بداخله وبالتالي الــــ text هيكون أصلا في المنتصف 😉

3- اذا كان العنصر inline او عنصر block
3.1- باستخدام خاصية ال flexbox

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
.parent {
    display: flex;
    justify-content: center;
    align-items: center;}

3.2- باستخدام خاصية ال grid

وذلك عن طريق إضافة الأكواد التالية للعنصر الأب
.parent {
     display: grid;
     justify-content: center;
     align-items: center;}

وفي الفيديو الخاص بهذا الدرس سوف يتم شرح الفرق بين align-items: center; و align-content: center;

توسيط العناصر التى تحتوى على خاصية الــ position
absolute || fixed

⚠ أهم شئ عند التعامل مع خاصية الـ position يجب ان تعلم :
العُنصر يتحرك بالنسبة لمين ؟؟؟؟؟

absolute يتحرك بالنسبة ل أقرب عُنصر أب يحتوى على قيمة للــ position

fixed يتحرك بالنسبة ل لحدود الصفحة

1- توسيط الـ text فى المُنتصف
position: absolute || fixed;
width: 100%;
text-align: center;

أو

position: absolute || fixed;
left: 0;
right: 0;
text-align: center;
2- توسيط العنصر فى المُنتصف

فى هذه الحالة يتحدد عرض العنصر على حسب المُحتوى الذى بداخله

position: absolute || fixed;
left: 50%;
transform: translateX(-50%);
3- توسيط العُنصر رأسياً
position: absolute || fixed;
top: 50%;
transform: translateY(-50%);
4- توسيط العنصر رأسياً وأفقياً
position: absolute || fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك