چطور میتونیم Style مربوط به DIV رو تنظیم کنیم طوریکه هر عنصر یا نوشته درون این تگ ،از نظر vertical در موقعیت middle باشه ؟
Printable View
چطور میتونیم Style مربوط به DIV رو تنظیم کنیم طوریکه هر عنصر یا نوشته درون این تگ ،از نظر vertical در موقعیت middle باشه ؟
این داستان برای IE و FF متفاوت هست پس توی Style خودت باید هر دو رو در نظر بگیری.
نمونه زیر رو ببین:
Style هایی که با _ شروع میشن فقط توی IE کار میکنن
<!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>
موفق باشید
سلام جناب raravaice
من این کدی رو که دادین تست کردم ولی فقط اوی ff کار میکنه، یعنی اون خاصیت هایی که گفتین با _ شروع میشن توی ie شناخته شده نیست که باعث میشه درست کار نکنه اگر _ ها رو حذف کنیم توی ie کار میکنه ولی توی ff باز کار نمیکنه.
به طور حتم داری از IE7 استفاده میکنی، به جای _ از # استفاده کن.
موفق باشید
شما نمیتونید هیچ وقت با top کاری کنی که یه div (با ارتفاع متغیر) وسط قرار بگیره. البته برای div با ارتفاع ثابت میشه ولی روشی که معرفی شد برای div با ارتفاع متغیر بیشتر کاربرد داره. یعنی اگر محتوای درون div رو زیاد کنی باز هم میبینی که وسط هست.نقل قول:
دوست عزیزمون در پست 2 خوب توضیح دادند ولی بیشتر مواقع valign رو برای جداول و عکس استفاده می کنند در حقیقت با top مقدار حاشیه رو بیشتر می کنید.
الیته بوسیله خاصیت top هم می شه ولی چندان معقولانه نیست . هر چند که استفاده از CSS هم در این مورد چندان Cross Browser نیست و در سیستم عامل مکنتاش اصلا جواب نمی ده
با top رو میشه تو یه نمونه نشون بدی که چه جوری تنظیم میکنی؟(منظور من در حالتی هست که طول div متغیر باشه)نقل قول:
الیته بوسیله خاصیت top هم می شه ولی چندان معقولانه نیست . هر چند که استفاده از CSS هم در این مورد چندان Cross Browser نیست و در سیستم عامل مکنتاش اصلا جواب نمی ده
دلیل معقولانه نبودنش هم همینه دوست عزیز. اما در مرورگر های غیر Mozilla Base می تونید در رویداد onresize این کار رو انجام بدید . ولی همونطور که شما هم می فرمایید ارزش علمی و فنی نداره. بنده فقط جهت اطلاع عرض کردمنقل قول:
نوشته شده توسط emad_67
به نظرم در این شرایط از تیبل استفاده کنید و valign رو middle قرار بدید
سلام دوستاننقل قول:
نوشته شده توسط raravaice
اگر خاصيت display در تگ Div برابر table قرار بديم رفتارش از نظر پردازش هنگام لود مثل table نمي شه ؟ منظورم اينكه زمان بارگزاري بالا نمي بره
حالا بلاخره اگه بخواهیم توی یه تگ div یه چیزی رو وسط قرار بدیم که توی هر مرورگری وسط نشونداده بشه چیکار کنیم؟؟؟؟؟
دوستان بهترین راه حل برای اینکار چی هست ؟!
سلام دوستان
من با استفاده از یک قطعه کد جاوا اسکریپتی و با استفاده از تگ Div یه بخش خاص از صفحه رو پرینت می گیرم.
اما متاسفانه صفحه ای که پرینت گرفته میشه هیچ کدون از تنظیمات کلاسهای من رو نداره. نه رنگ نه فونت نه تراز بندی. به تگ Div هم کلاس نسبت میدم ولی بازم فایده نداره. ممنون میشم راهنمایی کنید.
سلام .
درست است خیلی دیر است برای پاسخ گویی ، امّا جنبه آموزش دارد .
vertical-align:middle;display:table-cell از این دو مقدار در style ، div استفاده کنید.
یا حق