سوال: قراردادن یک div در وسط صفحه [بایگانی]

majid.mp

چهارشنبه 12 مرداد 1390, 00:03 صبح

با عرض سلام خدمت دوستان
من میخوام یک تگ دیو را از چهار جهت چپ راست بالا و پایین دقیقا در وسط صفحه قرار دهم از خصوصیت margin استفاده میکنم ولی فقط از چپ و راست در وسط صفحه قرار میگیرد!!،دوستان لطفا راهنمایی بفرمایید مشکل از کجاست؟
با تشکر.

aam313

چهارشنبه 12 مرداد 1390, 08:41 صبح

با سلام
راه حل اول یک جدول قرار بدید و متن رو داخلش بنویسید. کد نمونه رو در پایین نوشتم.

<p align="center"> </p>
<div align="center">
<table border="1" width="57%" id="table1" height="353">
<tr>
<td style="line-height: 150%" align="center">
<p align="center"> </td>
</tr>
</table>
</div>

</body>

راه حل دوم چند تا کد <br> و یا <p> قبل از کد Div قرار بدید تا به پایینتر بره.

alialirezaee1

چهارشنبه 12 مرداد 1390, 09:05 صبح

سلام

می تونی داخل style از min-height va max-height استفاده کنی

davood59

چهارشنبه 12 مرداد 1390, 11:49 صبح

به نظرتون آیا این راه جواب نمیده:
یک Body تعریف کرده و بعدش padding رو به صورت 20 یا 25 درصد از اطراف بذاریم؟
یعنی اینجوری
padding:25% 25% 25% 25%

majid.mp

جمعه 25 شهریور 1390, 23:41 عصر

با تشکر از پاسخ دوستان
دوستان من میخوام با کوچک کردن پنجره مرورگر باز div من در وسط صفحه قرار داشته باشد؟

dorparasti

شنبه 26 شهریور 1390, 10:03 صبح

خوب با کمی جستجو در اینترنت جواب های متعددی به دست میاد که چندان مناسب نبودن . ولی این یکی احتمالاً همونه که می خوای .... یک نمونه که من ساختم اینه و با تغییر اندازه پنجره هم کار می کنه .

<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div class="greenBorder" style="display: table; height:100%;width:100%; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%; margin:auto; width:150px;">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

اصل مقاله هم اینجا (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) است .

Saber Mogaddas

یک شنبه 27 شهریور 1390, 10:03 صبح

با عرض سلام خدمت دوستان
من میخوام یک تگ دیو را از چهار جهت چپ راست بالا و پایین دقیقا در وسط صفحه قرار دهم از خصوصیت margin استفاده میکنم ولی فقط از چپ و راست در وسط صفحه قرار میگیرد!!،دوستان لطفا راهنمایی بفرمایید مشکل از کجاست؟
با تشکر.
margin:auto یا از کل صفحه وسط چین میکنه یا باید div که میخواییم margin auto بگیره باید داخل یه div دیگه قرار بگیره و داخل اون div وسط قرار می گیره..

lahij.ir

شنبه 05 فروردین 1391, 00:01 صبح

فقط کافیه از چپ و راست marge و auto بزاری
<div id="header" style="width:800px; height:160px; background:#333; position:relative; top:10px; margin-left:auto; margin-right:auto; "></div>

moalla

شنبه 05 فروردین 1391, 18:06 عصر

فقط کافیه از چپ و راست marge و auto بزاری
<div id="header" style="width:800px; height:160px; background:#333; position:relative; top:10px; margin-left:auto; margin-right:auto; "></div>

این روش خیلی خوبه اما تا اونجایی که به یاد دارم توی فایرفاکس و کروم جواب میده و توی اینترنت اکسپلورر نسخه قبلی جواب نمیده. برای اینکه مشکل توی اون هم حل بشه باید یه خط کد به بالای صفحه اضافه کنید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

hamid333203

پنج شنبه 25 مهر 1392, 16:22 عصر

دوستان فقط کافیه class زیر را تعریف کنید و به div بدید:

.box {
height: 100px;
width: 100px;
background: #222;
position: absolute;

/*Centering Method 2*/
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}