متن در وسط div و وسط صفحه [بایگانی]

_Memol_

یک شنبه 09 بهمن 1390, 13:16 عصر

سلام
سوال : من میخوام متن دقیقا وسط div و وسط صفحه باشه
این کد :

html>
<head>
<style type="text/css">
div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
margin-top:50px;
margin-left:50px;
padding-top:50px;
padding-left:50px;
}
</style>

</head>
<body>
<div >
Hello
</div>
</body>
</html>
که جواب درستی نمیده
آیا فقط باید از margin و padding استفاده کنم؟
مشکل دیگه اینکه نمیدونم چرا توو chrome اینجوری نشون میده
http://s1.picofile.com/file/7271090428/chrome.jpg
اما توو IE خیلی عجیب نشون میده
http://s1.picofile.com/file/7271090000/IE.jpg

جالب اینجاست من یه div نوشتم اما توو IE میبینید که چه جوریه و دوتا نشون میده

cyrusthegreat

یک شنبه 09 بهمن 1390, 13:41 عصر

نگاه کن برای اینکه دایوت وسط صفحه باشه، به والد اون width: 100% بده. بعد برای دایوت بنویس: margin: 0 auto. این خود دایوت میاد وسط. برای اینکه متن داخل دایوت بیاد وسط برای دایوت بنویس: text-align: center
من تو IE8 تست کردم یک بود فقط. نسخه IEای که تست کردی چی بود؟؟؟

kianajoo

یک شنبه 09 بهمن 1390, 13:42 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
}
p{
text-align:center;
padding-top:40px;
}
</style>

</head>
<body>
<div >
<p>Hello</p>
</div>
</body>
</html>

cyrusthegreat

یک شنبه 09 بهمن 1390, 14:12 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{
width: 100%;
}
div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
text-align:center;
margin: 0 auto;
}
p {
padding-top: 20px;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>

_Memol_

یک شنبه 16 بهمن 1390, 16:28 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{
width: 100%;
}
div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
text-align:center;
margin: 0 auto;
}
p {
padding-top: 20px;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>

ممنون اما کدی که نوشتید فقط از نظر width میاد وسط صفحه
من میخوام هم از نظر width و هم از نظر height وسط صفحه باشه

cyrusthegreat

یک شنبه 16 بهمن 1390, 16:54 عصر

ممنون اما کدی که نوشتید فقط از نظر width میاد وسط صفحه
من میخوام هم از نظر width و هم از نظر height وسط صفحه باشه

دوست عزیز

تنها راه حلی که به نظر من جواب می ده این هست که یک مقدار ثابت با px برای تگ divات برای margin-top قرار بدی. یعنی CSS دایوت می شه:

div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
text-align:center;
margin: 0 auto;
margin-top: 250px;
}

css-man

یک شنبه 16 بهمن 1390, 17:00 عصر

کلا اندازه ها رو به درصد نیدی بهتره

محاسباتی باشه بهتر ه

برای وسط چین کردن هم که دوستان گفتن text align استفاده کن

hashemi85sep

یک شنبه 16 بهمن 1390, 17:08 عصر

سلام دوست عزیز
میتونی از تگ center استفاده کنی
همین کاری رو که میخوای برات انجام میده

cyrusthegreat

یک شنبه 16 بهمن 1390, 17:27 عصر

کلا اندازه ها رو به درصد نیدی بهتره

محاسباتی باشه بهتر ه

برای وسط چین کردن هم که دوستان گفتن text align استفاده کن

هیچ مشکلی از نظر طراحی توی استفاده از درصد نیست. اتفاقا درصد دادن خیلی وقت ها بکار میاد. با توجه به نیاز باید نوع مقدار دهی رو مشخص کرد و هیچکدومش به دیگری بطور کل ارجحیت نداره.

سلام دوست عزیز
میتونی از تگ center استفاده کنی
همین کاری رو که میخوای برات انجام میده

دوست عزیز
استفاده از اینگونه تگ ها مثل center, font و خیلی چیزهای دیگه که بدلیل عدم استفاده در چندین سال اخیر یادم رفته کاملا منسوخ شده. ما داریم به سمت HTML 5 حرکت می کنیم، دیگه استفاده از اون تگ هایی که حتی توی HTML 4.1 هم منسوخ شده و بی استفاده هستن، اشتباه محض هستش.

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

نکته دوم: اگر می بینید توی نسخه های اولیه و قدیمی HTML از اینگونه تگ ها بچشم می خوره، اون به این بر می گرده که اون اوایل چیزی بنام CSS وجود نداشت و بعدا معرفی شد. برای همین کسانی که استاندارد گذاری می کردن برای رفع نیاز های اون موقع اونهارو ارائه دادن. اگر هم الان می بینید توسط مرورگر ها پشتیبانی می شه بخاطر این هست که مرورگر مجبوره. اگر اینکارو نکنه انگ استاندارد نبودن . بدردنخوردن می خوره به پیشونیش. ( قدمت HTMLبه 1980 برمی گرده و قدمت CSS به 1996)

mrmazmamfi

دوشنبه 17 بهمن 1390, 01:18 صبح

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{
width: 100%;
}
div{
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
text-align:center;
margin: 0 auto;
}
p {
padding-top: 20px;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>

سلام
این کدی که نوشتید تو رزولیشن های مختلف ایراد داره ، و تغییر میکنه .
برای جلوگیری از این ایراد ما باید به این روش عمل کنیم .

position رو در حالت absolute قرار میدیم (البته بعدا خودت میتونی fixed و... هم بذاری )
بعد میاییم میگیم ، top مون به اندازه 50% از بالا بیاد پایین ، و مقدار Left رو هم 50% میدیم . (فاصله از چپ) » تا اینجا تصویرمون تقریبا تو وسط صفحه قرار گرفته ولی بازم وسط در وسط نیست .
آقایی که شما باشی میاییم ، میگیم ، از margin-top مون به اندازه ی نصف height دایومون کم کن (یعنی میشه margin-top:-50px ) ، برای margin-left هم میگیم منهای نصف width مون .
اینجاست که کار دست میشه و تو هر مرورگری و هر رزولیشنی که بری درست نمایش داده میشه .

کد اصلاح شده :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{
width: 100%;
}
div{
position:absolute;
background-color:pink;
width:100px;
height:100px;
border:3px solid blue;
text-align:center;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
p {
padding-top: 20px;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>در ضمن اگر دیدی بازم وسط نیست ، شک نکن که خطای چشمه ، چون این فرمولی که گفتم مو لا درزش نمیره .

VB.SOS

سه شنبه 25 بهمن 1390, 15:13 عصر

سلام
من هم به وسط قرار دادن آیتم ها وسط صفحه مشکل دارم. راه اولی که ارائه شده بود (margin: 0 auto)تقریبا جواب داد فقط مشکل اینه که من می خوام از بالا یه مقدار ثابت فاصله داشته باشه.
اما راه دوم اصلا جواب نداد. نتیجه نهایش اینه که Div سمت چپ می مونه. اگه فقط Left رو تنظیم کنم به سمت راست می چسبه. لطفا راهنماییم کنید خیلی مهمه

colors

سه شنبه 25 بهمن 1390, 16:35 عصر

سلام
من هم به وسط قرار دادن آیتم ها وسط صفحه مشکل دارم. راه اولی که ارائه شده بود (margin: 0 auto)تقریبا جواب داد فقط مشکل اینه که من می خوام از بالا یه مقدار ثابت فاصله داشته باشه.
اما راه دوم اصلا جواب نداد. نتیجه نهایش اینه که Div سمت چپ می مونه. اگه فقط Left رو تنظیم کنم به سمت راست می چسبه. لطفا راهنماییم کنید خیلی مهمه

درود

دقیقا بگید میخواین چیکار کنید من راهنمایتون کنم

omid6630

شنبه 29 بهمن 1390, 18:59 عصر

به نام خدا و سلام .

من یک div دارم - روی این دایو 2 تا div دیگه دارم . یکی بالا و یکی هم پایین . حتما هم میخوام 2تا دایو داخل یک دایو بزرگتر باشه .

دایو بالایی درست سر جاش قرار میگیره - اما برای تنظیم کردن div پایینی مشکل دارم . میخوام دقیقا بگم که دایو بیفته ته دایو زیریش .

همین .

colors

شنبه 29 بهمن 1390, 21:58 عصر

درود

اینو تست کن ببین اینو میخوای

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css">
div#content { position:relative; width:500px; height:500px; border:1px solid #000; padding:5px; margin:100px auto }
div#content div#div1{ position:relative; width:498px; height:245px; border:1px solid #f00}
div#content div#div2{ position: absolute; width:498px; height:245px; border:1px solid #06C; bottom:0}
</style>
</head>

<body>
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>