بسم الله الرحمن الرحيم

سوف نقوم بالتعرف على طرق توسيط العناصر باستخدام css و متى يمكن استخدام كل طريقة.

1. التوسيط باستخدام margin: 0 auto

تعتبر هذه الطريقة من اسهل الطرق لتوسيط العناصر و تعمل هذه الطريقة على عناصر الdisplay:block مثل الdiv.

القيمة 0 هي للمارجن فوق و تحت و auto للمارجن يمين و شمال و يمكن كتابته بطريقة اخرى مثل margin: 0 auto 0 او margin-left: auto; margin-right: auto

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

2. التوسيط باستخدام text-align: center

تعمل هذه الطريقة على عناصر ال display: inline و inline-block

في هذه الطريقة نقوم باعطاء text-align: center لل container الذي يحتوي على عناصر inline-block حتي يقوم بتوسيطهم.

يقوم text-align: center بتوسيط النصوص مع العناصر لان النص يعتبر inline لذلك اذا كنت لا تريد توسيط النص يمكن اعطاء text-align بالاتجاه الذي تريده لعناصر الinline-block الذي قم بتوسيطهم.

يفضل استخدام هذه الطريقة اذا كان مجموع مساحة العناصر اقل من 97% لان عناصر ال inline و inline-block تحتوي على مسافة قبل و بعد كل عنصر.

يمكن توسيط اكثر من عنصر بهذه الطريقة.


.container {
    text-align: center;
}

.elem {
    display: inline-block;
}

3. التوسيط باستخدام justify-content

يعتبر justify-content من خواص ال display: flex و يقوم justify-content بالتحكم في المسافات بين و حول محتوي الcontainer على المستوي الافقي

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

  • justify-content: center : لتوسيط العناصر بدون مسافات.
  • justify-content: space-between : لتوزيع العناصر مع وضع مسافات بين كل عنصر, و يمكن التوسيط باستخدام طريقة مارجن auto يمين و شمال للcontainer.
  • justify-content: space-around : لتوزيع العناصر مع وضع مسافات حول العناصر

يمكن توسيط اكثر من عنصر بهذه الطريقة.

.container {
    display: flex;
    justify-content: center;
}

4. التوسيط باستخدام position

position: absoute

تقوم باعطاء position: absolute للعنصر و position: relative للcontainer, و تقوم باعطاء left: 50% لعنصر الabsolute مع (0 ,transform: translate(-50px.

الleft يتم احتسابه من المساحة الافقية للcontainer

الtranslate يتم احتسابه من المساحة الافقية للعنصر


.container {
    position: relative;
}

.elem {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}