قرار دادن تگ Div در وسط صفحه به کمک jQuery

یکی از کارهای لازم در طراحی وب سایت قرار دادن تگ div ( تگ اصلی که بقیه تگها زیر مجموعه آن می باشند ) در وسط صفحه می باشد که برای انجام این کار از تکنیک های مختلفی استفاده می شود برای مثال استفاده از css و دادن خصوصیات display : block و margin : 0 auto به تگ div برای قرار گرفتن در وسط صفحه اما در این آموزش با استفاده از jQuery این کار را انجام می دهیم از مزیت های این روش قرار گیری div در وسط صفحه هم از نظر افقی و هم عمودی می باشد یعنی دقیقا div در وسط صفحه قرار می گیرد.

برای شروع کار ابتدا یک فایل html استاندارد در ادیتور ایجاد کنید و سپس قطعه کد زیر را در قسمت head قرار دهید تا jQuery در صفحه لود شود

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

حال کد js زیر را که وظیفه انجام عملیات را دارد بعد از فراخوانی جی کوئری اضافه کنید

<script type="text/javascript">
function CenterItem(theItem){
    var winWidth=$(window).width();
    var winHeight=$(window).height();
    var windowCenter=winWidth/2;
    var itemCenter=$(theItem).width()/2;
    var theCenter=windowCenter-itemCenter;
    var windowMiddle=winHeight/2;
    var itemMiddle=$(theItem).height()/2;
    var theMiddle=windowMiddle-itemMiddle;
    if(winWidth>$(theItem).width()){ //horizontal
        $(theItem).css('left',theCenter);
    } else {
        $(theItem).css('left','0');
    }
    if(winHeight>$(theItem).height()){ //vertical
        $(theItem).css('top',theMiddle);
    } else {
        $(theItem).css('top','0');
    }
}
$(document).ready(function() {
    CenterItem('.centered');
});
$(window).resize(function() {
    CenterItem('.centered');
});
</script>

اگر آشنایی با javascript و jQuery داشته باشید به راحتی نحوه عملکرد کد را می فهمید و حتی می توانید به دلخواه خود آن را ویرایش نمایید. نکته مهم در کد بالا در خطوط انتهایی می باشد که تابع  CenterItem دو بار فراخوانی شده و یک مقدار در داخل پرانتز برای آن ارسال شده که مقدار آن centered می باشد که در واقع کلاس تگ div مورد نظر برای قرار گیری در وسط صفحه می باشد و باید کلاس به درستی نوشته شود لازم به ذکر است اگر فقط می خواهید تگ div در حالت افقی وسط صفحه قرار گیرد می توانید قسمت زیر را از کد حذف نمایید

if(winHeight>$(theItem).height()){ //vertical
        $(theItem).css('top',theMiddle);
    } else {
        $(theItem).css('top','0');
    }

بعد از انجام کارهای فوق css های زیر را در head قرار دهید

<style type="text/css">
	body {
		margin: 0px;
		padding: 0px;
		background: #fff;
	}
	.centered {
		position: relative;
		width: 400px;
		height: 250px;
		background: #ddd;
	}
	.centered div {
		padding: 20px;
	}
</style>

سپس تگ های زیر را در قسمت body قرار دهید

<div class="centered"><div>Centered content</div></div>

حال اگر صفحه را ذخیره و در مرورگر باز نمایید نتیجه کار را خواهید دید.