طلب المساعدة في توسيط محتويات div باستخدام css

zuhairtaha · 06-09-2010, 05:55 PM

السلام عليكم ورحمة الله وبركاته
مثال:
الكود التالي:

كود PHP:

  <div style="background-color:lime;height:300px;width:300px;text-align:center;vertical-align:middle">thank you</div>

أريد أن تظهر فيه كلمة thank you في الوسط تماماً
حيث أن text-align:center تجعلها متوسطة بالنسبة للخط العرضي
أما عملية التوسيط العمودي فهي لا تعمل vertical-align:middle
حيث كانت تعمل مع الجداول
فهل من أحد يقدم يد المساعدة ولكم جزيل الشكر

vodos · 06-09-2010, 08:47 PM

vertical-align لا تستخدم لهذا الغرض اقرأ هنا www.w3schools.com/css/pr_pos_vertical-align.asp
انا بالنسة للتوسيط الشاقولي استخدم

كود:

padding-bottom:100%;padding-top:100%

وهذا هو الكود

كود:

<div style="background-color:lime;height:200px;width:200px;text-align:center;padding-bottom:100%;
padding-top:100%;">thank you</div>

zuhairtaha · 06-09-2010, 09:39 PM

أشكرك يا vodos على الرد
ولكن الذي حصل أن الـ div اصبحت تملأ الشاشة بالعرض
و الكلام في الوسط كما أردت
ولكن أريد التحكم بارتفاع الـ div

vodos · 06-09-2010, 11:56 PM

صحيح هذه الطريقة تعمل فقط على internet Explorer
لكن يوجد طريقة اخرى تعمل على كافة المستعرضات
ان نضع النص الذي لديك ضمن p ماشي بعد ذالك نطبق على p الكود

إقتباس:

شرح الكود استخدمنا الموضع هنا من relative و هي تأخذ فقط top و bottom وليس
left و right

aL7eRbI · 07-09-2010, 06:05 AM

و عليك السلام ورحمة الله وبركاتة

بسيطه اخوي بس ضع خاصية margin و padding و اجعل قيمتهم auto

بعد التعديل ,,

إقتباس:

<div style="padding:auto; margin:auto; background-color:lime;height:300px;width:300px;text-align:center;vertical-align:middle">thank you</div>

zuhairtaha · 07-09-2010, 03:06 PM

أشكركم جميعاً على المساعدة
تم تجربة كافة الحلول
ويبدو أنه لايوجد طريقة بحيث يبدو المحتوى مثل خلايا الجداول تماماً
جزاكم الله كل خير
يمكن الآن اغلاق الموضوع

المتميز السعودي · 07-09-2010, 08:32 PM

تفضل

كود PHP:

  <div style="background-color:lime;height:300px;width:300px;text-align:center;margin:auto"><p style=margin-top:45%;">thank you</p></div>

Blank · 08-09-2010, 07:49 AM

ببساطة .. أضف خاصية line-height للعنصر.

كود:

  <div style="background-color:lime;height:300px;width:300px;text-align:center;line-height:300px;">thank you</div>

zuhairtaha · 08-09-2010, 02:11 PM

أشكركم جميعاً
طريقة Blank كانت هي الأنسب فألف شكر