سلام ،
چجوری می شه محتویات Div را در وسط وسط قراردهیم ؟
Printable View
سلام ،
چجوری می شه محتویات Div را در وسط وسط قراردهیم ؟
[HTML]
<div align="center"></div>
[/HTML]
بسم الله الرحمن الرحیم
سلام
از طریق کد css زیر هم می شود:
کد:margin: 0 auto;
منظورم اینه که در محور عمودی و افقی با شه . این رو هم بگم چون display اش رو none , block می کنم اینا کار نمی کنند ! :30:
افقی: margin: 0 auto; بده و برای این‌که تحت IE هم کار کنه، خصوصیت text-align والدش رو center بده.
عمودی: یه خاصیت به اسم vertical-align هست ولی فکر نکنم استاندارد باشه و تحت همه مرورگرها کار کنه. تکنیک این این‌طوریه که باید مقدار height و line-height رو به عنصرت مثل هم بدی. ولی این تکنیک هم برای عناصر فرم کار نمی‌کنه. برای اونا باید بهشون به میزانی که میخوای عنصرت ارتفاع داشته باشه از بالا و پایین padding بدی. این تکنیکه تحت همه مرورگها کار می‌کنه.
اگه هم بخوای فقط یه عکسی چیزی وسط بذاری طول و ارتفاع رو تنظیم کن و تصویر رو به عنوان پشت زمینه معرفی کن و خاصیت background-position رو مقادیر center center بده.
:31:
نقل قول:
صفحهرو که باز کردم کلی امیدوار شدم . چون دوست عزیز TemplateMonster چیزی نوشته بود . اما چیزی که من می خواستم نبود . من می خوام 1 div وسط div یا Table دیگر بگذارم و مقدارکد:http://forum.p30world.com/forumdisplay.php?f=45
رو هم حتما بهش بدم . اما ... :13::13:کد:display: block
این خصوصیت‌ها هیچ‌کدوم با display: block مشکلی ندارن. می‌تونی بیشتر توضیح بدی و سورس صفحه رو هم بذاری؟
نه نمی تونم ولی شما خودت امتحان کردی ؟ در فایر ؟ :34:
پیدا کردم! اینو امتحان کن:
من یه خورده توضیح بدم، اگه position والد رو relative بدیم و position فرزند رو relative، مقادیر left, right, top, bottom بر حسب اون والد سنجیده می‌شن، نه پنجره مرورگر. اگه مقدار top رو 50 درصد بدیم وسط میفته منتهی باید مقدار height حتماً تنظیم شده باشه و پنجره مرورگر هم اسکرول نداشته باشه. این کدی که این بالا هست مشکل دومی رو حل می‌کنه ولی هنوز هم این هست که باید مقدار ارتفاع حتماً به صورت دستی تعیین شده باشه. و برای حل این فعلاً هیچ راه حلی که با CSS سازگار باشه موجود نیست. :20:کد:<style>
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:#bed1de;
position: relative;
top: -200px;
/* IE4ever ----: Hide from IE4 **/
position: static;
/** end ---- */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end ---- */
/* ]]> */
</style>
</head>
<body>
<div id="shim"/></div>
<div id="wrapper">
Content
</div>
</body>
توضیح کامل شما حرفی برای گفتن نگذاشت !