8

float: right - float: left -- ماذا عن float: center !؟

لاحظت الأمر منذ وقت طويل عندما كنت أعدل على بعض أكواد CSS في مدونتي

  • لماذا هناك float: right و float: left و ليس هناك float: center ؟

  • و كيف يمكننا جعل عنصر ما في وسط الصفحة بواسطة CSS ؟

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

التعليقات

2
mo'ez hmouma 
 margin: 0 auto;

اما لتوسيط النص text-align:center;

0
SIMO GFX

شكرا لك

margin: 0 auto; لا تنجح

1
assassinateur

لتنجح على العنصر أن يملك عرض محدد، وليس block بلا عرض، ففي تلك الحالة عرضه 100% ولن تنفع

0
SIMO GFX

حددت عرض الصورة و مازالت بدون تأثير

أنظر بنفسك:

1
assassinateur

هذا لأن طريقة عرض الصورة display الخاص بها هو بشكل افتراضي inline

في حالة inline عليك أن تعطي العنصر الأب (في هذه الحالة body) هذا الكود

text-align:center;

أو قم بإضافة هذا السطر للصورة فحسب، وستتوسط مباشرة

display: block;

لا داعي لإضافة عرض معين مع الصور، فهي تستخدم عرضها تلقائيا،

0
SIMO GFX

حُلت المشكلة :

شكرا لك :)

1
assassinateur

لا داعي لأن تضيف هذا السطر

body {
  text-align:center;
}

فكما قلت، أحد الخياران يكفي

1
Znashty

يمكن استخدام

margin:0 auto;

إلا فى حالة كان العنصر له عرض ثابت..

ويمكن توسطية عن طريق وضعه داخل div جديد مثلاً

.outer-div {

padding:30px;

text-algin:center;

}

.inner-div {

display:inline-block;

padding:40px;

}

0
مجهول
0
php4u

width:xxpx;

margin-right:auto;

margin-left:auto;

postion:relative;

0
Liban

بامكانك جعل اي عنصر وسط الصفحة باستخدام flexbox

مثال بسيط :

واذا كنت تتسال عن الدعم المتصفحات لهذه الخاصية :

-1
husseinquzmar

العنصر في الأصل يكون center فإذا كنت تريده في الوسط فقط لا تضع float

0
SIMO GFX

هل هذا صحيح حقا؟

لأنه عند اضافة صورة مثلا في محرر الأكواد أجدها تذهب تلقائيا الى اليسار

0
محمد

ربما هذا ناتج عن توجيه الصفحة من اليسار لليمين

direction:rtl;

0
aliosm

إذا كنت تريد العنصر في المنتصف قم بعمل : margin:0 auto; .

وسيتم وضع العنصر في منتصف الصفحة .