ورود

View Full Version : سوال: قرار دادن يك يا چند div در وسط يك div ديگه چطوري ؟


احمد سامعی
دوشنبه 12 مرداد 1388, 17:22 عصر
سلام
فرض كنيد يك div مادر داريم حالا مي خوايم چند تا div ديگه تو اين قرار بديم به صورت سطري و ستوني (يعني در سه ستون هر ستون داراي چند سطر Div)
تا اينجا مشكلي نيست
اما من نتونستم اين مجموعه رو در وسط div مادر قرار بدم و كلاً چپ چين مي شه
چي كار بايد كرد ؟
البته همونطور كه مي بينيد از تگ center هم استفاده كردم اما جواب نمي ده اگر تو اين div مادر يك table يا هر المان ديگه بزارم مي ره وسط اما divها نه !


.Logo
{
min-width:780px;
overflow:hidden
}
.LT
{
width:130px;
height:50px;
float:left;
overflow:hidden
}
<div id="DivBody">
<center>
<div class="Logo">
<div class="LT">
</div>
<div class="LT">
</div>
<div class="LT">
</div>
<div class="Logo">
<div class="LT">
</div>
<div class="LT">
</div>
<div class="LT">
</div>
</center>
</div>
Rejnev
دوشنبه 12 مرداد 1388, 17:39 عصر
با سلام
تگ های div از کنار هم بودن متنفرند!
شما باید برای هر div یک style با position:absolute و left:xx و top:yy تعریف کنید.یا اینکه تگ مادر رو با table بخش بندی کرده div ها رو درون اون بندازید.
emad_67
دوشنبه 12 مرداد 1388, 19:02 عصر
اما من نتونستم اين مجموعه رو در وسط div مادر قرار بدم و كلاً چپ چين مي شه
چي كار بايد كرد ؟
البته همونطور كه مي بينيد از تگ center هم استفاده كردم اما جواب نمي ده اگر تو اين div مادر يك table يا هر المان ديگه بزارم مي ره وسط اما divها نه !شما div های داخلی رو float: left کردی و برای همین نمیشه با center اونو اورد وسط.
در همچین مورد شما 2 تا کار می تونی بکنی:
1) width ئی برای کلاس Logo در نظر بگیری که 3 div داخلی رو پوشش بده. مثلا div های داخلی شما در اینجا 130 پیکسل عرض دارن، شما باید عرضی برابر 3*130 پیکسل برای Logo بزاری. حالا میتونی div مربوط به این کلاس رو با margin وسط قرار بدی:

.Logo
{
width: 396px;
margin: 0 auto;
overflow:hidden;
border:1px solid #000;

}
.LT
{
width:130px;
height:50px;
overflow:hidden;
border: 1px solid #000;
float: left;
}
</style>
</head>

<body>
<div id="DivBody">
<div class="Logo">
<div class="LT">
</div>
<div class="LT">
</div>
<div class="LT">
</div>
</div>
<div class="Logo">
<div class="LT">
</div>
<div class="LT">
</div>
<div class="LT">
</div>
</div>
</div>
2) اگر می خوای Logo همون عرض اولیه رو داشته باشه باید div دیگری در داخل این div در نظر بگیری و div های کوچک رو در داخل این div قرار بدی و مجددا مثل بالا موقعیت دهی کنی. البته راه اول بهتره اگر محدودیتی توی عرض Logo نداری.
تگ center و div رو هم نبسته بودی که اصلاح کردم.

تگ های div از کنار هم بودن متنفرند!شما با float راحت میتونی نفرت رو به دوستی تبدیل کنی :دی

شما باید برای هر div یک style با position:absolute و left:xx و top:yy تعریف کنید.یا اینکه تگ مادر رو با table بخش بندی کرده div ها رو درون اون بندازید.در همچین موردی استفاده از postion زیاد معقولانه نیست، چون باید برای هر div داخلی به صورت جدا position و موقعیت خاص خودش رو در نظر بگیری. table هم که دیگه ...
احمد سامعی
دوشنبه 12 مرداد 1388, 23:41 عصر
تگ center و div رو هم نبسته بودی که اصلاح کردم.

منون مشكل سر همون center بود نمي دونم چرا درست نبود دوباره كه پاك كردم نوشتم درست شد

اما وقتي به جاي div هاي داخلي از ul و li استفاده مي كنم وقتي چندتا div زير هم قرار مي دم اولين div مادر كمي متايل به راست مي شه و از بقيه جدا مي شه ؟

واسه همين مجبور شدم از ul و li استفاده نكنم و تمام ستون ها و رديف ها رو با div بسازم. آيا اين روش يكم غير استاندارد نيست ؟ (مي خوام TableLess باشه)
(الان تو FF 9 و Mozila 3.5 و IE 7 يكسان نشون مي ده)
emad_67
دوشنبه 12 مرداد 1388, 23:45 عصر
اما وقتي به جاي div هاي داخلي از ul و li استفاده مي كنم وقتي چندتا div زير هم قرار مي دم اولين div مادر كمي متايل به راست مي شه و از بقيه جدا مي شه ؟
من دقیقا نمیدونم می خوای چیکار کنی با این div ها.
در مورد ul هم کدت رو بزار چک کنم.