قرار دادن عناصر دقیقا در مرکز صفحه نمایش توسط jQuery

آیا تاکنون سعی کرده اید عنصری را طوری در صفحه وب خود پیاده سازی کنید که دقیقا در وسط همه مروگرها و مانیتورهای گوناگون با روزلوشن های متفاوت ظاهر شود؟ اگر پاسخ شما مثبت است پس حتما با مشکلات گوناگون اینکار خصوصا وسط قرار دادن در محور عمودی صفحه آشنایی دارید. در این آموزش می خواهیم توسط کدهای جی کوئری عنصر مورد نظر را دقیقا در وسط صفحه نمایش دهیم. این تکه کد بدون هیچ مشکلی در تمامی مرورگرها و مانیتورها با رزولوشن های مختلف عنصر مورد نظر را دقیقا در وسط محور عمودی و محور افقی قرار خواهد داد.


• تابع وسط چین عناصر در صفحات وب


jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

• نحوه استفاده از تابع


$('#window').center();

نظرات (4) -

  • hamed

    10/07/1390 03:48:47 ب.ظ | پاسخ به این نظر

    سلام خسته نباشید.سایت پر محتوایی دارید.
    لطفا راجب تداخل جی کوئری هم مطلب بنویسید.با تشکر

  • محمد

    04/15/1393 01:16:03 ق.ظ | پاسخ به این نظر

    سلام
    من یک سایت html دارم
    میخوام یک عکس وسط سایتم موقع لوود بیاد بالا و بازدید کننده بعد از خوندن ببنده
    یجور بنر شناور وسط سایت مثل این سایت  www.hamavaran.com
    ممنون میشم کمکم کنید خیلی نیاز دارم

Loading