واضح آرشیو وب فارسی:سایت ریسک: چجوری یه div رو وسط صفحه قرار بدم به روش table less (از نظر بالا و پایین بودن) eliTive 26 مهر 1388, 21:15چجوری یه div رو وسط صفحه قرار بدم به روش table less (از نظر بالا و پایین بودن) ببخشید گشتم ولی چیزی پیدا نکردم تو انجمن اگه هست لینکش رو بدید فقط خواهشا توجه کنید که منظورم وسط قرار گرفتن از نظر بالا و پایین بودن هست و به روش table less . echessdesign 27 مهر 1388, 10:02بفرمایید: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta "Content-Type" content="text/html; charset=utf-8" /> <title>Content</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } * { margin:0px auto; padding:0; } div#shim { visibility: hidden; width: 100%; height: 50%; margin-top: -200px; float: left; } div#wrapper { width: 1000px; height: 400px; clear: both; background:red; position: relative; top: -200px; /* IE4ever Hack: Hide from IE4 **/ position: static; } </style> </head> <body> <div id="shim"/></div> <div id="wrapper"> Content </div> </body> </html> eliTive 28 مهر 1388, 17:10echessdesign () جان وسط قرار نمی گیره ، شما امتحان کن. اگر عرض 400 رو تغییر بدی میاد پایین صفحه فقط یکی از دوستان به من یه کد معرفی کرده بود که این کار رو انجام می داد ولی توش از table استفاده شده بود. echessdesign 30 مهر 1388, 14:24درود بر شما تصور نفرمایید که یک کدی رو شما داشتید که در هر شرایطی و با هر طول و عرضی کار می کرد! شما توجه بفرمایید که وسط ماندنم عنصر، مستلزم آن است که شما مقدار دیگر عناصر صفحه را نیز تغییر دهید. مثلا زمانی که مقدار height را تغییر می دهید، باید مقدار : margin-top: top: را برابر نصف میزان height قرار دهید. مثال: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta "Content-Type" content="text/html; charset=utf-8" /> <title>Content</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } * { margin:0px auto; padding:0; } div#shim { visibility: hidden; width: 100%; height: 50%; margin-top: -100px; float: left; } div#wrapper { width: 1000px; height: 200px; clear: both; background:red; position: relative; top: -100px; /* IE4ever Hack: Hide from IE4 **/ position: static; } </style> </head> <body> <div id="shim"/></div> <div id="wrapper"> Content </div> </body> </html> silverboy65 03 آبان 1388, 17:00خیلی ممنون کار کرد ببخشید یه سوال می پرسم احتمالا جاش اینجا نیست ولی لطفا راهنمایی کنید * { margin:0px auto; padding:0;این بخش رو می شه توضیح بدید یعنی این کد الان فقط روی body اثر می ذاره ؟ کلا میشه در رابطش توضیح بدید؟ یه چیز دیگه واسه چی اینجا top مقدار دهی شده؟ بدون اون هم که کار می کنه!
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 563]