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

[zuhairtaha]

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

<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]

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]

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

[vodos]

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

<style>
p{
position: relative;
top: 50%;
bottom: 50%;
text-align:center;
margin:0;

}
</style>
<div style="background-color:lime;height:200px;width:200px;
"><p>thank you</p></div>

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

[aL7eRbI]

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

بسيطه اخوي بس ضع خاصية 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]

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

[المتميز السعودي]

تفضل

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

[Blank]

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

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

[zuhairtaha]

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