mrgraphy
سه شنبه 04 مهر 1391, 15:15 عصر
سلام دوستان.
من خودم به یک مشکلی خوردم که باید یک div رو دقیقا در وسط صفحه قرار میدادم و مسئله این بود که این div هر دفعه اندازش تغییر میکرد وکار خیلی سخت میشد که بلاخره با استفاده از jquery این مسئله حل شد و تونستم این div رو به صورت دائم دقیقا در وسط صفحه قرار بدم.
کدش رو براتون میزارم و بعد توضیح میدم که چطوری میشه.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function(){
var body_height=$(document).height();
var box_height=$(".box").height();
var box_top=Math.floor((body_height/2)-(box_height/2));
$(".box").css('top',box_top);
var body_width=$(document).width();
var box_width=$(".box").width();
var right_box=Math.floor((body_width/2)-(box_width/2));
$(".box").css('right',right_box);
});
</script>
<style>
.box{
width:300px;
height:300px;
background-color:#F90;
color:#FFF;
position:absolute;
}
</style>
</head>
<body>
<div class="box">Hello</div>
</body>
</html>
خب تو این صفحه من با استفاده از jquery اندازه صفحه(طول و عرض) و همچنین اندازه عنصر مورد نظر خودم رو میگیرم.
بعد ارتفاع صفحه رو تقسیم بر 2 میکنم و ارتفاع عنصر (در این مثال div) رو هم تقسیم بر 2 میکنم و بعد ارتفاع div رو از ارتفاع صفحه کم میکنم.
همین کار رو درمورد طول هم انجام میدم.
حالا من دو تا مقدار دارم.
position عنصر مورد نظر خودم رو absolute میکنم مقدار top رو مساوی مقدار بدست اومده از ارتفاع و مقدار rightv رو مساوی مقدار بدست اومده از طول میکنم.
به این ترتیب div من دقیقا در وسط صفحه قرار میگیره بدن اینکه اندازه div تاثیری داشته باشه.
اگر سوالی بود بپرسید.
من خودم به یک مشکلی خوردم که باید یک div رو دقیقا در وسط صفحه قرار میدادم و مسئله این بود که این div هر دفعه اندازش تغییر میکرد وکار خیلی سخت میشد که بلاخره با استفاده از jquery این مسئله حل شد و تونستم این div رو به صورت دائم دقیقا در وسط صفحه قرار بدم.
کدش رو براتون میزارم و بعد توضیح میدم که چطوری میشه.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function(){
var body_height=$(document).height();
var box_height=$(".box").height();
var box_top=Math.floor((body_height/2)-(box_height/2));
$(".box").css('top',box_top);
var body_width=$(document).width();
var box_width=$(".box").width();
var right_box=Math.floor((body_width/2)-(box_width/2));
$(".box").css('right',right_box);
});
</script>
<style>
.box{
width:300px;
height:300px;
background-color:#F90;
color:#FFF;
position:absolute;
}
</style>
</head>
<body>
<div class="box">Hello</div>
</body>
</html>
خب تو این صفحه من با استفاده از jquery اندازه صفحه(طول و عرض) و همچنین اندازه عنصر مورد نظر خودم رو میگیرم.
بعد ارتفاع صفحه رو تقسیم بر 2 میکنم و ارتفاع عنصر (در این مثال div) رو هم تقسیم بر 2 میکنم و بعد ارتفاع div رو از ارتفاع صفحه کم میکنم.
همین کار رو درمورد طول هم انجام میدم.
حالا من دو تا مقدار دارم.
position عنصر مورد نظر خودم رو absolute میکنم مقدار top رو مساوی مقدار بدست اومده از ارتفاع و مقدار rightv رو مساوی مقدار بدست اومده از طول میکنم.
به این ترتیب div من دقیقا در وسط صفحه قرار میگیره بدن اینکه اندازه div تاثیری داشته باشه.
اگر سوالی بود بپرسید.