لاحظت الأمر منذ وقت طويل عندما كنت أعدل على بعض أكواد CSS في مدونتي
لماذا هناك float: right و float: left و ليس هناك float: center ؟
و كيف يمكننا جعل عنصر ما في وسط الصفحة بواسطة CSS ؟
margin: 0 auto;
اما لتوسيط النص text-align:center;
شكرا لك
margin: 0 auto; لا تنجح
لتنجح على العنصر أن يملك عرض محدد، وليس 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;
width:xxpx;
margin-right:auto;
margin-left:auto;
postion:relative;
بامكانك جعل اي عنصر وسط الصفحة باستخدام flexbox
مثال بسيط :
واذا كنت تتسال عن الدعم المتصفحات لهذه الخاصية :
العنصر في الأصل يكون center فإذا كنت تريده في الوسط فقط لا تضع float
هل هذا صحيح حقا؟
لأنه عند اضافة صورة مثلا في محرر الأكواد أجدها تذهب تلقائيا الى اليسار
ربما هذا ناتج عن توجيه الصفحة من اليسار لليمين
direction:rtl;
إذا كنت تريد العنصر في المنتصف قم بعمل : margin:0 auto; .
وسيتم وضع العنصر في منتصف الصفحة .
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
صمم موقعك كاملا بالسحب والإفلات بدون خبرة برمجية، واحجز مكانك على الإنترنت.