آموزش : قرار گرفتن دیو در وسط مرورگر در هر رزلوشن

[saber mogaddas]

همانطور که می دانیم ما توسط margin:auto می توانیم عنصر و یا دیو را در وسط مرورگر قرار دهیم ولی این موضوع فقط در عرض مرورگر تاثیر گزار هست ولی ما قادر به این نیستیم که به صورت عمودی عنصر خود را در وسط صفحه قرار دهیم ، من امروز این موضوع رو توسط یک تابع کوچک جی کوئری برای شما انجام خواهم داد.
این تابع به این صورت عمل می کند که ابتدا طول صفحه مرورگر را پیدا می کنیم .

var winheight = $(window).height();

در مرحله دوم ارتفاع عنصر مورد نظر رو پیدا می کنیم.

var divheight = $("#Div-Element").height();

و بعد با یک جمع و تفریق ساده ، مقدار margin که باید از قسمت بالا برای عنصر اعمال کنیم را پیدا می کنیم و در style آن اعمال می کنیم.

var totalheight = winheight - divheight;
            var realheight = totalheight / 2;
            $("#Div-Element").css({ 'margin-top': realheight });

برای استفاده این دستورات باید از کتابخانه jquery استفاده کنید..
دانلود DEMO
منبع این مقاله
موفق باشید..