كيفية توسيط التصميم بـ CSS ؟

[منصور الدويغري]

السلام عليكم

كيف يمكن عمل التالي /




اي توسيط التصميم باختلاف الشاشات ليس من اليمين و اليسار

بل من اعلى و اسفل


شكراً للمساعده مقدماً


مودتي

[owner]

اهلا ..

جرب هذي الخصائص .

.ff {
background-color: #808080;
height: 20%;
margin-top: 30%;
}
body {
margin: 0px;
padding: 0px;
}

لكن ما اعتقد راح يضبط معاك اذا كان المحتوى كبير . الفكرة تكمن في انك تستخدم المارجن فوق وتحت بالنسبة المئوية حتى يكون في الوسط مهما تغيرت الشاشات

[الإمبراطور وحيد]

السلام عليكم
تحية اخوي owner

لماذا لاتنفع الخاصية vertical-align لذلك ؟ وهل توجد طريقة أكثر فاعلية ؟

توجد طريقة مضمونة باستخدام الجداول فقط ..

باستخدام جدول كالتالي :

<div align="center">
 <table border="0" cellpadding="4" style="border-collapse: collapse" width="100%" id="table1" height="100%">
  <tr>
   <td align="center" width="100%" height="100%">في الوسط مهما كان</td>
  </tr>
 </table>
</div>

لكني افضل الطبقات عوضا عن الجداول ، فهل توجد طريقة ؟

وفقكم الله

السلام عليكم .

[منصور الدويغري]

شاهدو هذا الموقع

Pack Your Bag . Net

انا بالضبط اريد جعل التصميم في المنتصف مهما كان ..


سأجرب ما اسلفتم و اوافيكم بالخبر

شكراً مقدما

[الإمبراطور وحيد]

السلام عليكم
اخي Garebooo
دخلت الموقع لكنه ليس في المنتصف !!

[منصور الدويغري]

نعم عزيزي وحيد هذا الموقع الذي اردت توسيطه

[منصور الدويغري]

جربت الكودين لكنها لم تنجح للاسف

.

اي فكرة

وشكراً مره اخرى على المساعدة

[OmanSecurity]

حط الـ margin
للـ top و الـ bottom لـ auto

[الإمبراطور وحيد]

حط الـ margin
للـ top و الـ bottom لـ auto

السلام عليكم

اخي تمت تجربتها لكن للأسف لاتعمل ...

يتم التوسيط في منتصف الصفحة افقيا فقط وليس عاموديا
لك تحياتي

[الإمبراطور وحيد]

جربت الكودين لكنها لم تنجح للاسف

.

اي فكرة

وشكراً مره اخرى على المساعدة

السلام عليكم
تاكد من استخدامك للجدول بشكل كامل
وجربها على صفحة اخرى حتى تتأكد

لانها تعمل لدي بشكل صحيح
تحياتي لك

[الإمبراطور وحيد]

السلام عليكم
عذرا اخي تمت تجربة الكود وهو لايعمل على المتصفح فاير فوكس إلا إذا تم تحديد الارتفاع بالبكسل وليس النسبة المئوية

لكن يعمل بشكل سليم على الإكسبلور

سلامي لك وللجميع

[owner]

السلام عليكم
عذرا اخي تمت تجربة الكود وهو لايعمل على المتصفح فاير فوكس إلا إذا تم تحديد الارتفاع بالبكسل وليس النسبة المئوية

لكن يعمل بشكل سليم على الإكسبلور

سلامي لك وللجميع

جرب تغيير ال height="100%" الى min-height="100%"

[منصور الدويغري]

لم يعمل !

انا اريد التوسيط ليس في الوسط center انما في الوسط middle

Pack Your Bag . Net

هذا الموقع ..


شكراً لكم

[Sharbaji]

مش فاهم عليك !!

[منصور الدويغري]

التوسيط في منتصف الشاشه من اعلى و اسفل يا عزيزي

الصورة في الرد الاول قد توضح اكثر