منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

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

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;

- ثم نضع الكود التالي للعناصر الـــ childdisplay: 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;

Do not waste your time and start with us, now 😍