31

ثلاث طرق لتوسيط العناصر باستخدام css

السلام عليكم ورحمة الله

لاحظت الكثير من مطوري الويب يستخدمون طرق غير مباشرة لتوسيط العناصر باستخدام javascript مثلاً

الطريقة الاولي باستخدام position

الاستخدام

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

الطريقة

يجب ان يملك العنصر نوع position من fixed او absolute

في البداية سنقوم بتحديد left: 50% و top: 50% ان لاحظت لن تجده توسيط حقيقي لان الرسم سيبدأ من 50% من الايسر ومن الاعلي ايضاً اذاً ستكون كالتالي

https://jsfiddle.net/k8d753kL

اذاً لتحقيق التوسيط يجب ان نقوم بتحريك العنصر 50% من لليسار و 50% الي الاعلى اذاً سنستخدم 

transform: translate(-50%,-50%)

ليكون كالتالي https://jsfiddle.net/t5eLbkor

اذاً الكود النهائي 

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

ملاحظات

اذا كنت تريد العنصر متحرك مع الشاشة اجعله position : fixed لتوسيط عنصر داخل عنصر اكبر يجب ان يحتوي العنصر الاكبر علي position: relative هناك متصفحات اخري لاتدعم transfrom بشكل مباشر و يجب اضافة بادئة للكود -webkit-transform -moz-transform -o-transform

-ms-transform

الطريقة الثانية margin:auto

الاستخدام

تستخدم هذه الطريقة بكثرة لتوسيط الbody داخل عرض الشاشة ويستخدم ايضاً في باقي العناصر

الطريقة

يجب ان يحتوي العنصر علي display من نوع block ويجب ايضاً ان يحدد بعرض اقل من العنصر الاكبر له مثال https://jsfiddle.net/gmhzk57p

ليكون الكود

 .center{
 margin: auto;
 display: block
 }

ملاحظة

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

لتوسيط عنصر لايحتوي علي display: block بشكل تلقائي مثلاً صورة يجب ان تضع display: block

الطريقة الثالثة ;text-align: center

الاستخدام

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

الطريقة

يتم وضع text-align: center في العنصر الاكبر العنصر الاصغر يجب ان يحتوي علي display من نوع inline او inline-block يفضل استخدام inline-block لتستطيع التحكم في العرض و margin وpadding مثال

https://jsfiddle.net/gngz3a...

مثال اخر لاكثر من عنصر معاً

https://jsfiddle.net/mrbfnp...

ملاحظات للتوسيط من الاعلي يمكن اضافة vertical-align: middle; مع line-height بطول العنصر الاكبر

يوجد طرق اخرى وانا فقط قمت بالتحدث عن الثلا الاشهر .

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

5
assassinateur أضف ردا

ملاحظة بالنسبة للطرق الثلاثة ولماذا قد لا تكون حلول مجدية

ملاحظة بسيطة للمثال الأول، أنت لست محدودا ب absolute و fixed

ف relative و sticky تعمل أيضا بدون مشاكل طالما كان الحاوي واضحا ويحتوي على position:realtive

الحل الأول يستخدم ولكن ليس بكثرة لأنك قد تحتاج لاستخدام خاصية translate في شيء آخر

هناط طريقة أخرى لوضعه في الوسط بنفس المفهوم على شرط أن تكون أبعاد العنصر معروفة (مثلا العرض معروف) لتستخدم الخاصية التالية

element {
    position: relative;
    width: 100px;
    top: calc(50% - 50px);
}

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

container {
    display: flex;
    justify-content: space-around|center|space-between; //أيّ من هذه الخيارات كفيلة بتوسيط العنصر أو كل العناصر أفقيا
    align-items: center; //هذا السطر كفيل بتوسيط كل العناصر عموديا
}

طريقة أخرى لتوسيط عنصر ما في وسط النافذة تماما وبدون استخدام fixed تكون عبر viewport units

element {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%,-50%);
}

سيضع هذا العنصر في منتصف الشاشة تماما مهما كان حجم حاويه (لأنك ستواجه مشاكل مع النسب المؤوية إن لم يكن الحاوي المباشر للعنصر هو body بل عنصر ما صغير الحجم)

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

وشكرا على تعبك في كتابة المقال

0
supercoder أضف ردا

شكراً لردك

الحل الأول يستخدم ولكن ليس بكثرة لأنك قد تحتاج لاستخدام خاصية translate في شيء آخر

يمكن استخدام translate بشكل متعدد فقط مسافة بين كل خاصية 

transform: rotate(30deg) translate(-50%,-50%);

بالنسبة ل calc كنت استخدمها قديما لكن تخليت عنها لان العنصر يجب ان يكون محدد بحجم ثابت ويكون هناك مشاكل مع التصميم المتجاوب

بالنسبة ل flex-box لا استخدمه تعرف من الصعب ان تشرح للعميل انك تستخدم الاحدث وانه بحاجة الي تغير او تحديث متصفح خاصة اني لا استطيع الصبر كثيراً

بالنسبة viewport units لم اسمع بهذه الطريقة من قبل شكراً لك .

0
assassinateur أضف ردا

بالنسبة للنقطة الأولى قصدت قد تحتاج translate نفسها وليس بقية خواص transform

flex-box لا مشكل ةفي دعم المتصفحات إذا كنت تستخدم autoprefixer فحتى أقدم المتصفحات تدعمها مثل IE 10 والنسخ القديمة من كل المتصفحات

0
supercoder أضف ردا

بالنسبة للنقطة الأولى قصدت قد تحتاج translate نفسها وليس بقية خواص transform

يمكن ايضاً استخدام calc مثال translate(calc(-50% - 50px),calc(-51% - 5px))

0
mohammadqandeel أضف ردا

الله يوفقك الى العمل الصالح ,, مبدع

0
zakariamouhid أضف ردا

طريقة رابعة لتوسيط img داخل div

div{
    position: absolute;
    width: 500px;
    height: 500px;
}
div img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}