چجوری یه div رو وسط صفحه قرار بدم به روش table less (از نظر بالا و پایین بودن)

eliTive · Oct 18, 2009

چجوری یه div رو وسط صفحه قرار بدم به روش table less (از نظر بالا و پایین بودن)

ببخشید گشتم ولی چیزی پیدا نکردم تو انجمن اگه هست لینکش رو بدید فقط خواهشا توجه کنید که منظورم وسط قرار گرفتن از نظر بالا و پایین بودن هست و به روش table less .

echessdesign · Oct 19, 2009

بفرمایید:

HTML:

<!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>Content</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
 
* {
margin:0px auto;
padding:0;
}
 
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
 
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
}
</style>
</head>

<body>
<div id="shim"/></div>
<div id="wrapper">
Content
</div>
 

</body>

</html>

eliTive · Oct 20, 2009

echessdesign جان وسط قرار نمی گیره ، شما امتحان کن.
اگر عرض 400 رو تغییر بدی میاد پایین صفحه فقط یکی از دوستان به من یه کد معرفی کرده بود که این کار رو انجام می داد ولی توش از table استفاده شده بود.

echessdesign · Oct 22, 2009

درود بر شما
تصور نفرمایید که یک کدی رو شما داشتید که در هر شرایطی و با هر طول و عرضی کار می کرد!
شما توجه بفرمایید که وسط ماندنم عنصر، مستلزم آن است که شما مقدار دیگر عناصر صفحه را نیز تغییر دهید.
مثلا زمانی که مقدار height را تغییر می دهید، باید مقدار :
margin-top:
top:
را برابر نصف میزان height قرار دهید.
مثال:

HTML:

<!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>Content</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
 
* {
margin:0px auto;
padding:0;
}
 
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -100px;
float: left;
}
 
div#wrapper {
width: 1000px;
height: 200px;
clear: both;
background:red;
position: relative;
top: -100px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
}
</style>
</head>

<body>
<div id="shim"/></div>
<div id="wrapper">
Content
</div>
 

</body>

</html>

silverboy65 · Oct 25, 2009

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

کد:

* {
margin:0px auto;
padding:0;

این بخش رو می شه توضیح بدید
یعنی این کد الان فقط روی body اثر می ذاره ؟
کلا میشه در رابطش توضیح بدید؟

یه چیز دیگه
واسه چی اینجا top مقدار دهی شده؟ بدون اون هم که کار می کنه!