لاحظت الأمر منذ وقت طويل عندما كنت أعدل على بعض أكواد CSS في مدونتي
لماذا هناك float: right و float: left و ليس هناك float: center ؟
و كيف يمكننا جعل عنصر ما في وسط الصفحة بواسطة CSS ؟
float: right - float: left -- ماذا عن float: center !؟
لتنجح على العنصر أن يملك عرض محدد، وليس block بلا عرض، ففي تلك الحالة عرضه 100% ولن تنفع
هذا لأن طريقة عرض الصورة display الخاص بها هو بشكل افتراضي inline
في حالة inline عليك أن تعطي العنصر الأب (في هذه الحالة body) هذا الكود
text-align:center;
أو قم بإضافة هذا السطر للصورة فحسب، وستتوسط مباشرة
display: block;
لا داعي لإضافة عرض معين مع الصور، فهي تستخدم عرضها تلقائيا،
لا داعي لأن تضيف هذا السطر
body {
text-align:center;
}
فكما قلت، أحد الخياران يكفي
يمكن استخدام
margin:0 auto;
إلا فى حالة كان العنصر له عرض ثابت..
ويمكن توسطية عن طريق وضعه داخل div جديد مثلاً
.outer-div {
padding:30px;
text-algin:center;
}
.inner-div {
display:inline-block;
padding:40px;
}
بامكانك جعل اي عنصر وسط الصفحة باستخدام flexbox
مثال بسيط :
واذا كنت تتسال عن الدعم المتصفحات لهذه الخاصية :
هل هذا صحيح حقا؟
لأنه عند اضافة صورة مثلا في محرر الأكواد أجدها تذهب تلقائيا الى اليسار
إذا كنت تريد العنصر في المنتصف قم بعمل : margin:0 auto; .
وسيتم وضع العنصر في منتصف الصفحة .
التعليقات