ورود

View Full Version : سوال: قرار دادن 2 تا جعبه مربع تو در تو طوری که مربع دوم دقیقا وسط مربع اول باشه


r4hgozar
یک شنبه 07 مهر 1392, 19:47 عصر
سلام دوستان.
من می خوام 2 تا جعبه تو در تو طوری که جعبه دوم دقیقا وسط مربع اول باشه.
این هم کدم

@charset "utf-8";
/* CSS Document */

* {
margin:0px;
padding: 0px;
}
#wapper {
margin: auto;
background-color: #090;
width: 960px;
min-height: 600px;
position: relative;


}
#admin-wapper {
margin:300px auto auto auto;
background-color: #03F;
height: 200px;
width :200px;
position: fixed;

}



<!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" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
<div id="wapper">

<div id="admin-wapper"></div>
</div>
</body>
</html>
r4hgozar
یک شنبه 07 مهر 1392, 19:53 عصر
البته جواب رو خودم می دونم /اما می خوام بدونم روش درست و اصولیش چیه.

ممنون
engmmrj
یک شنبه 07 مهر 1392, 20:06 عصر
برای اینکه از چپ و راست وسط باشد margin رو auto بگذارید و برای بالا به پایین از کد زیر استفاده کنید :

var divs = $('.box').height();
var h = ( $(window).height() - divs ) / 2 ;
$('.box').css({'margin-top':h+'px'});
r4hgozar
یک شنبه 07 مهر 1392, 20:15 عصر
برای اینکه از چپ و راست وسط باشد margin رو auto بگذارید و برای بالا به پایین از کد زیر استفاده کنید :

var divs = $('.box').height();
var h = ( $(window).height() - divs ) / 2 ;
$('.box').css({'margin-top':h+'px'});


ممنون دوست عزیز ولی نمی خوام از جاوا استفاده کنم.
engmmrj
یک شنبه 07 مهر 1392, 20:22 عصر
متاسفانه css قابلیت center کردن از بالا به پایین را ندارد !
Omid Jackson
یک شنبه 07 مهر 1392, 20:55 عصر
http://jsfiddle.net/OmidJackson/mxNpZ/
Omid Jackson
یک شنبه 07 مهر 1392, 21:20 عصر
ممنون دوست عزیز ولی نمی خوام از جاوا استفاده کنم.
دوست عزیز جاوا با جاوا اسکریپت فرق میکنه، اینجا سایت آموزشی هستش، یه اشتباه کوچولو که بکنین باعث میشه این اشتباه تو ذهن کسایی که دارن آموزش میبینن هم بره، لطفا دقت کنین که بقیه دچار اشتباه نشن:لبخندساده:
و ایشون از کتابخونه جی کوئری استفاده کردن
موفق باشین:لبخندساده:
r4hgozar
یک شنبه 07 مهر 1392, 23:21 عصر
دوست عزیز جاوا با جاوا اسکریپت فرق میکنه، اینجا سایت آموزشی هستش، یه اشتباه کوچولو که بکنین باعث میشه این اشتباه تو ذهن کسایی که دارن آموزش میبینن هم بره، لطفا دقت کنین که بقیه دچار اشتباه نشن:لبخندساده:
و ایشون از کتابخونه جی کوئری استفاده کردن
موفق باشین:لبخندساده:

سلام.
ممنون من میدونم تفاوت دارن دوست عزیز و میدونم از جی کوئری استفاده کردن
Omid Jackson
یک شنبه 07 مهر 1392, 23:44 عصر
سلام.
ممنون من میدونم تفاوت دارن دوست عزیز و میدونم از جی کوئری استفاده کردن
خب پس درستش رو بگین خیلی بهتره :)
کد رو دیدین؟
r4hgozar
دوشنبه 08 مهر 1392, 07:32 صبح
خب پس درستش رو بگین خیلی بهتره :)
کد رو دیدین؟

بله ممنون. هميشه تو استفاده تر position مشكل داشتم و دارم متاسفانه/ احساس مي كنم خوب دركس نكردم
Omid Jackson
دوشنبه 08 مهر 1392, 10:12 صبح
شما اینجا position رو fixed دادین، موقعیتی که تو صفحه نمایش داره حفظ میشه و با اسکرول ثابت میمونه و یعنی قفل میشه و با حرکت بالا و پایین یا چپ و راست میشه