Printable View
هه!
چه عنوانی شد!×!
دوستان چند بار هم پرسیده بودم و لی به جایی نرسیدم
گفتم دوباره مطرح کنم
نگاه کنید
یه div اصلی داریم که مثلا 100 درصد در 100 درصد هست
تا اینجاش هیچی
بعد میخاویم یه div با ابعاده پیکسلی وسطش قرار بدیم که با resize کماکان وسط باشه
چه از نظره طولی چه عرضی
کدش چی میشه؟:31:
سلام قشنگ.
من خودم شاهدم یکیش رو که یاسر خودش بهت گفت!!!
در هر حال...
عمودی:
افقی:کد:
vertical-align:middle;
display: table-cell;/* فقط برای div */
کد:margin: 0 auto
بابا اینا پس چرا کار نمیکنن؟
آی! [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
بابا منو گزاشتید سره کار؟
هر کاریش میکنم وسط نمیاد!×!
کمک!×!
اینم کد نمونه
.recent-posts-content {
font-family: tahoma;
font-size: 11px;
text-decoration: none;
font-weight: normal;
background-color: D9DEB8;
padding: 2px;
margin: 0 auto;
width: 95%;
display: block;
overflow: hidden;
float: inherit;
line-height: normal;
text-align: right;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #666666;
}
همین کد برای من وسط میاد!
شاید مشکل از doctype باشه! با XHTML 1.0 Transitional تست کن.
یاسین جون آخه اون که هست؟
اینم یه سورسه کامل
از طریقه Html
align center دادم بهشون
تو IE وسطه ولی تو بقیه یه چند پیکسل اونور تر از وسط میافته
اینم کده کامل
کد:<html dir="rtl">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="fa" http-equiv="Content-Language">
<style type="text/css">
.recent-posts {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
line-height: normal;
text-align: center;
background-color: #CFD4A9;
border: 1px solid #666;
padding: 2px;
width: 100%;
overflow: hidden;
display: block;
margin-top: 3px;
margin-right: 3px;
margin-left: 3px;
}
.recent-posts-content {
font-family: tahoma;
font-size: 11px;
text-decoration: none;
font-weight: normal;
background-color: #D9DEB8;
padding: 3px;
width: 90%;
line-height: normal;
text-align: right;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #888;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
display: block;
}
</style>
</head>
<body bgcolor="#E4E8C6" leftmargin="0" topmargin="0">
<br><br>
<div align="center">
<center>
<table border="0" width="780" cellpadding="5" cellspacing="5" dir="rtl">
<center>
<tr>
<td align="center" width="33%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای<br>بایای<br>بایب<br>ای<br>بای<br>ای<br>
ای<br><br>زیا<br>یا </div>
</td>
<td align="center" width="34%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای<br>بایای<br>بایب<br>ای<br>بای<br>ای<br>
ای<br><br>زیا<br>یا </div>
</td>
<td align="center" width="33%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای<br>بایای<br>بایب<br>ای<br>بای<br>ای<br>
ای<br><br>زیا<br>یا </div>
</td>
</tr>
</center>
</table>
</center></div>
</body>
</html>
خب خوشگلم فکر کنم مشکل از margin باشه از این استفاده کن.
[html]
<html dir="rtl">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="fa" http-equiv="Content-Language">
<style type="text/css">
.recent-posts {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
line-height: normal;
text-align: center;
background-color: #CFD4A9;
border: 1px solid #666;
padding: 2px;
overflow: hidden;
display: block;
margin-top: 3px;
margin-right: 3px;
margin-left: 3px;
}
.recent-posts-content {
font-family: tahoma;
font-size: 11px;
text-decoration: none;
font-weight: normal;
background-color: #D9DEB8;
padding: 3px;
width: 90%;
line-height: normal;
text-align: right;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #888;
display: block;
}
</style>
</head>
<body bgcolor="#E4E8C6" leftmargin="0" topmargin="0">
<br><br>
<div align="center">
<center>
<table border="0" width="780" cellpadding="5" cellspacing="5" dir="rtl">
<center>
<tr>
<td align="center" width="33%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای <br>بایای<br>بایب<br>ای<br>بای<br>ا ی<br>
ای<br><br>زیا<br>یا </div>
</td>
<td align="center" width="34%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای <br>بایای<br>بایب<br>ای<br>بای<br>ا ی<br>
ای<br><br>زیا<br>یا </div>
</td>
<td align="center" width="33%">
<div class="recent-posts">
.: آخـــریــن مـــطالــب :.</div>
<div class="recent-posts-content">
سیتسیذلسی<br>سیببایبا<br>یبای <br>بایای<br>بایب<br>ای<br>بای<br>ا ی<br>
ای<br><br>زیا<br>یا </div>
</td>
</tr>
</center>
</table>
</center></div>
</body>
</html>
[/html]
برای سنتر کردن به صورت عمودی لایه فقط از table-cell میشه استفاده کرد که خیلی هم مرسوم نیست هیچ راه دیگه ای وجود نداره , ولی افقی خیلی راحته .
ها؟نقل قول:
راست میگی ها!×!
ولی آخه margin رو بعدش اضافه کردم که!×!
درکل align="center" زو که میشه تو همه جا استفاده کرد ولی مسنکه خوده اینکار استاندارد نیستنقل قول:
سنتر کردن عمودی !؟ یعنی مثلا لایه از بالا و پایین وسط صفحه قرار بگیره کلا این کار یکمی در لایه سخته و خیلی هم البته کاربردی نیست کلا کثرا دنبال سنتر کردن افقی هستن . در مورد استفاده از تگ Center هم دقت کن چون تگ منسوخ شده ای هست و همچنین استفاده از لایه در table که اصلا کار جالبی نیست .نقل قول: