در div base laouting‌ ورتیكال الاین (vertical-align) خوب كار نمی كنه [بایگانی]

majid_darab

دوشنبه 10 آبان 1389, 14:55 عصر

با سلام و عرض خسته نباشید :
من یك المنت div دارم كه برای اون ارتفاع تعریف كردم.
در داخل این div یك تیبل داریم (می تواند هر المنت دیگری باشد) كه می خواهیم در مركز این div بشینه ...
مشكلی كه در اینجا وجود داره اینه كه من در اینجا دارم از ویندوها استفاده می كنم و سایز div مربوطه نشان دهنده سایز ویندو است.حال اگر برای وسط چین كردن عمودی المنت table از margin استفاده كنیم سایز بندی ویندو داغون می شود.پس دنبال روشی هستم كه بتونه مشكل vertical-align رو حل كنه
اما مشكل چیه؟
مشكل از این قراره كه v-a انگار ست نشده و تیبل همیشه در بالای دیو قرار می گیره.
كد xhtml می تونه به صورت زیر باشه :

<div style="width: 850px; height: 470px; vertical-align: middle;"
align="center">

<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr><tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
</table>
</div>
خوب یكی از دوستان گفت بیا در css خاصیت display مربوط به div رو به صورت table-cell تعریف كن
یعنی اینجوری :

<div style="width: 850px; height: 470px; display: table-cell; vertical-align: middle;"
align="center">

<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr><tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
</table>

</div>
در این حالت مشكل جدیدی بوجود میاد ...
مشكل از این قراره كه width‌ ست شده برای div نادیده گرفته می شه و انگار width آن 3-4 px است.
خوب من این مشكلو با راه غیر اصولی زیر حل كردم :

<div style="width: 850px; height: 470px; display: table-cell; vertical-align: middle;"
align="center">
<div style="width: 850px">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr><tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
</table>
</div>
</div>
اما روش بالا نباید راه درست صورت مساله باشد.
در كل می خوام بدونم كه برای وسط چین كردن یك المنت از نظر عمودی داخل div با margin و بی margin چگونه باید عمل كرد كه درست كار كنه؟

با تشكر از راهنمایی شما
مجید داراب

Keramatifar

دوشنبه 10 آبان 1389, 15:54 عصر

شما باید بر top رو بصورت درصدی در نظر بگیری (بر حسب ارتفاع div درونی نسبت به ارتفاع div بیرونی)
مثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample</title>

</head>
<body>
<div style="width: 850px; height: 470px; position: relative; border: 1px dashed red; ">
<div style=" border: 1px dashed blue; width: 700px; margin: 0 auto; top: 35%; position: relative;" >
<table style=" width: 700px; border: 1px groove #0033CC; background-color: #F9F9F9; ">
<tr>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
3
</td>
<td>
3
</td>
</tr>
</table>
</div>
</div>
</body>
</html>