PDA

View Full Version : سوال: چیدمان درون تگ DIV


dr_csharp
شنبه 11 آبان 1387, 12:22 عصر
چطور میتونیم Style مربوط به DIV رو تنظیم کنیم طوریکه هر عنصر یا نوشته درون این تگ ،از نظر vertical در موقعیت middle باشه ؟
raravaice
شنبه 11 آبان 1387, 12:46 عصر
این داستان برای IE و FF متفاوت هست پس توی Style خودت باید هر دو رو در نظر بگیری.
نمونه زیر رو ببین:



<!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>
<title>test</title>
<style type ="text/css">
.rd
{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="rd" style="display: table; height: 400px; _position: relative; overflow: hidden;
width: 300px">
<div style="_position: absolute; _top: 50%; display: table-cell; vertical-align: middle;
width: 300px">
<div class="rd" style="_position: relative; _top: -50%">
test
<br />
test<br />
test<br />
test
</div>
</div>
</div>
</body>
</html>
Style هایی که با _ شروع میشن فقط توی IE کار میکنن

موفق باشید
emad_67
شنبه 11 آبان 1387, 20:01 عصر
سلام جناب raravaice (http://barnamenevis.org/forum/member.php?u=37086)
من این کدی رو که دادین تست کردم ولی فقط اوی ff کار میکنه، یعنی اون خاصیت هایی که گفتین با _ شروع میشن توی ie شناخته شده نیست که باعث میشه درست کار نکنه اگر _ ها رو حذف کنیم توی ie کار میکنه ولی توی ff باز کار نمیکنه.
raravaice
شنبه 11 آبان 1387, 20:16 عصر
به طور حتم داری از IE7 استفاده میکنی، به جای _ از # استفاده کن.

موفق باشید
emad_67
دوشنبه 13 آبان 1387, 12:20 عصر
دوست عزیزمون در پست 2 خوب توضیح دادند ولی بیشتر مواقع valign رو برای جداول و عکس استفاده می کنند در حقیقت با top مقدار حاشیه رو بیشتر می کنید.شما نمیتونید هیچ وقت با top کاری کنی که یه div (با ارتفاع متغیر) وسط قرار بگیره. البته برای div با ارتفاع ثابت میشه ولی روشی که معرفی شد برای div با ارتفاع متغیر بیشتر کاربرد داره. یعنی اگر محتوای درون div رو زیاد کنی باز هم میبینی که وسط هست.
امید امرایی
دوشنبه 13 آبان 1387, 13:56 عصر
الیته بوسیله خاصیت top هم می شه ولی چندان معقولانه نیست . هر چند که استفاده از CSS هم در این مورد چندان Cross Browser نیست و در سیستم عامل مکنتاش اصلا جواب نمی ده
emad_67
دوشنبه 13 آبان 1387, 15:34 عصر
الیته بوسیله خاصیت top هم می شه ولی چندان معقولانه نیست . هر چند که استفاده از CSS هم در این مورد چندان Cross Browser نیست و در سیستم عامل مکنتاش اصلا جواب نمی ده

با top رو میشه تو یه نمونه نشون بدی که چه جوری تنظیم میکنی؟(منظور من در حالتی هست که طول div متغیر باشه)
امید امرایی
دوشنبه 13 آبان 1387, 20:46 عصر
با top رو میشه تو یه نمونه نشون بدی که چه جوری تنظیم میکنی؟(منظور من در حالتی هست که طول div متغیر باشه)

دلیل معقولانه نبودنش هم همینه دوست عزیز. اما در مرورگر های غیر Mozilla Base می تونید در رویداد onresize این کار رو انجام بدید . ولی همونطور که شما هم می فرمایید ارزش علمی و فنی نداره. بنده فقط جهت اطلاع عرض کردم
__ziXet__
شنبه 16 خرداد 1388, 19:49 عصر
به نظرم در این شرایط از تیبل استفاده کنید و valign رو middle قرار بدید
احمد سامعی
دوشنبه 12 مرداد 1388, 17:09 عصر
[code]
<div class="rd" style="display: table; >

سلام دوستان
اگر خاصيت display در تگ Div برابر table قرار بديم رفتارش از نظر پردازش هنگام لود مثل table نمي شه ؟ منظورم اينكه زمان بارگزاري بالا نمي بره
elmira_63
چهارشنبه 12 خرداد 1389, 15:34 عصر
حالا بلاخره اگه بخواهیم توی یه تگ div یه چیزی رو وسط قرار بدیم که توی هر مرورگری وسط نشونداده بشه چیکار کنیم؟؟؟؟؟
Mr.Rabbit
پنج شنبه 24 تیر 1389, 15:23 عصر
دوستان بهترین راه حل برای اینکار چی هست ؟!
zakieh
یک شنبه 24 مرداد 1389, 15:17 عصر
سلام دوستان

من با استفاده از یک قطعه کد جاوا اسکریپتی و با استفاده از تگ Div یه بخش خاص از صفحه رو پرینت می گیرم.
اما متاسفانه صفحه ای که پرینت گرفته میشه هیچ کدون از تنظیمات کلاسهای من رو نداره. نه رنگ نه فونت نه تراز بندی. به تگ Div هم کلاس نسبت میدم ولی بازم فایده نداره. ممنون میشم راهنمایی کنید.
masoudcg1
سه شنبه 22 آذر 1390, 21:46 عصر
سلام .
درست است خیلی دیر است برای پاسخ گویی ، امّا جنبه آموزش دارد .
vertical-align:middle;display:table-cell از این دو مقدار در style ، div استفاده کنید.
یا حق