چیدمان درون تگ 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
من این کدی رو که دادین تست کردم ولی فقط اوی 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 عصر

نوشته شده توسط emad_67

با top رو میشه تو یه نمونه نشون بدی که چه جوری تنظیم میکنی؟(منظور من در حالتی هست که طول div متغیر باشه)

دلیل معقولانه نبودنش هم همینه دوست عزیز. اما در مرورگر های غیر Mozilla Base می تونید در رویداد onresize این کار رو انجام بدید . ولی همونطور که شما هم می فرمایید ارزش علمی و فنی نداره. بنده فقط جهت اطلاع عرض کردم

**__ziXet__** · شنبه 16 خرداد 1388, 19:49 عصر

به نظرم در این شرایط از تیبل استفاده کنید و valign رو middle قرار بدید

**احمد سامعی** · دوشنبه 12 مرداد 1388, 17:09 عصر

نوشته شده توسط raravaice

[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 استفاده کنید.
یا حق

نام تاپیک: چیدمان درون تگ DIV

ابزار های تاپیک

نمایش

چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

چیدمان درون تگ DIV

نقل قول: چیدمان درون تگ DIV

قوانین ایجاد تاپیک در تالار