+6 صوت
25.5 K عرض

3 إجابة

+1 صوت
بواسطة
مختارة بواسطة
 
أفضل إجابة

هل تقصد التوسيط العمودي أم الأفقي ؟
التوسيط الأفقي :
توجد طريقتان أستعملهما للتوسيط العناصر أفقيا ،
 

margin-left:auto;
margin-right:auto;
display:block;


بالنسبة للنصوص أعتقد أنك تعرفها  
text-align:center;

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

ثم تقوم ب:

text-align:center;

وسيتم توسيط النص و الصورة معا في نفس الوقت..

و بالنسبة للتوسيط العمودي
تعطي للإبن


display:table-cell;
vertical-align:middle;


وتعطي للأب

display:table;

وسيتم التوسيط عموديا

بواسطة
شرح ممتاز أخي YounesWP لكن كتصحيح بسيط لما ذكرت عن التوسيط الأفقي فيمكنك استخدام
margin: auto;
بدلاً من:
margin-left:auto;
margin-right:auto;
+2 صوت
+1 صوت
بواسطة

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

#father { margin:0 auto; width: 300px;}

و في حال رغبتك بتوسيط المحتوى داخل العنصر نفسه ,, عليك باضافة :

#element{text-align:center;} 

تحياتي ..

محتـوى ذات علاقــة

مرحبـــاً بكـــم في أكاديميـــة آرتيـــك، المجتمـــع المفتـــوح الـــذي يمكنكـــم مـــن تبـــــــادل المعـــــــــــــارف التقنيـــــــــة باسلوب بسيـــط وممتـــع ..

قبل استخدام الموقـــع نرجوا قراءة الشـروط والتعليمــات والإطلاع على شــــرح نظــــــام المكافئـــات واكتســاب النقاط في الأكاديمية

204 المحتـــوى

231 الإجابـات

74 المناقشات

971 المستخدمون


...