PDA

View Full Version : vertical-align:middle کردن محتویات div


.fatemeh
پنج شنبه 31 فروردین 1391, 13:30 عصر
سلام
من یه div دارم داخلش یه سری div دیگه هست.
می خوام اطلاعات داخلی دقیقا مرکز قرار بگیره .وقتی از margin استفاده می کنم با تغییر مانیتور
جابه جا می شه درصد هم گذاشتم ولی درست نشد.
مثلا توی مانیتور 17 اینچ درست بشه توی مانیتور بزرگتر بالا میاد اگه به بزرگتره تنظیم کنم توی مانیتور 17
اسکرول می خوره
vertical-align:middle گذاشتم کار نکرد
لطفا راهنمایی کنید.
ممنون
MMSHFE
پنج شنبه 31 فروردین 1391, 13:39 عصر
این مشکل مربوط به CSS هست و بنابراین من اون رو به بخش طراحی منتقل کردم.
wallfa
پنج شنبه 31 فروردین 1391, 14:36 عصر
از مرجین استفاده کن و مرجین از بالا بذار مقدار مشخص از کنار بذار روی auto
cyrusthegreat
پنج شنبه 31 فروردین 1391, 14:39 عصر
سلام
من یه div دارم داخلش یه سری div دیگه هست.
می خوام اطلاعات داخلی دقیقا مرکز قرار بگیره .وقتی از margin استفاده می کنم با تغییر مانیتور
جابه جا می شه درصد هم گذاشتم ولی درست نشد.
مثلا توی مانیتور 17 اینچ درست بشه توی مانیتور بزرگتر بالا میاد اگه به بزرگتره تنظیم کنم توی مانیتور 17
اسکرول می خوره
vertical-align:middle گذاشتم کار نکرد
لطفا راهنمایی کنید.
ممنون

دوست عزیز

بطورکلی، HTML و CSS بگونه ای استاندارد سازی شدن که برای وسط کردن عمودی بهینه نیستن و نمی شه اینکارو با صرف این دوتا انجام داد، بگونه ای که در همه جا یکسان باشند. چون محتویات اون div های وسطی با اندازه صفحه تغییر می کنند نمی شه از درصد استفاده کرد. تنها راه حل موجود استفاده از JS هستش.
clover
پنج شنبه 31 فروردین 1391, 15:03 عصر
دوست من، بسته به اینکه چه کاری قراره انجام بدید پاسخ متفاوته، اما با تنظیم کردن ویژگی های display: table-cell و vertical-align: middle به div با ارتفاع ثابت می تونید المنت های داخلی رو در وسط نگه دارید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.d1 { display: table-cell; vertical-align: middle; width: 200px; height: 200px; background: blue; }
.d2 { background: Red; }
</style>
</head>
<body>
<div class="d1">
<div class="d2">test</div>
</div>

</body>
</html>
MMSHFE
پنج شنبه 31 فروردین 1391, 15:09 عصر
دوست عزیز، دقت کنید که vertical-align به خود عنصر اعمال میشه نه محتویات داخلیش. درنتیجه اگه میخواین محتوای داخلی div ازنظر عمودی وسط قرار بگیره، اون محتوا رو داخل یک div کلی بگذارین و به اون div که داخل div اصلی شما هست، vertical-align بدین. موفق باشید.
Saber Mogaddas
پنج شنبه 31 فروردین 1391, 17:33 عصر
سلام
vertical align کلا منسوخ شده هست و تو کد های استاندارد w3c کنسرسیوم جهانی وب حذف شده..
پیشنهاد میکنیم از margin برای اینکار استفاده کنید..
و اگه از margin به صورت درست استفاده کنید با تغییر مانیتور نیز تغییری نمیکنه..
می تونید کد هاتون رو بزارید تا بررسی شه..
موفق باشی..
.fatemeh
شنبه 02 اردیبهشت 1391, 10:31 صبح
چه طوری باید از margin به شکل درست استفاده کنم؟
راه حل هایی که دوستان گفتن امتحان کردم درست نشد.
صفحه ای دارم طراحی می کنم صفحه اول سایته باید لوگوی شرکت به همراه چهارتا عکس دقیقا مرکز بیاد.


<div align="center" >
<div class="patern"></div>
<div class="center"></div>
<div >
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
</div>
<div class="patern"></div>
</div>


css هم به شکل خارجی تعریف شده
فایل css:

body{
background-color:#FFC20C;
margin-bottom:0px;}
.center{
width:400px;
height:290px;
background-image:url(../images/temp/jeld.png);
margin-bottom:-25px;
margin-top:-20px;
vertical-align:middle;}
.patern{
background-image:url(../images/temp/boote_02.png);
background-repeat:no-repeat;
height:100px;
width:995px;
position:relative;
vertical-align:middle;}

خواهش می کنم کمکم کنید.
Saber Mogaddas
شنبه 02 اردیبهشت 1391, 16:13 عصر
سلام
یه دیو اصلی برای هدر ایجاد میکنی..بهش float نمیدی ..بجای float از margin :0 auto استفاده میکنی..حالا این دیو وسط صفحه قرار داره..
یه دیو دیگه توی این دیو اصلی درست میکنی .. و عکس هاتو میندازی داخل این دیو ..حالا به این دیو float:right یا float:left بده.. و با margin-right یا margin-left جابجاش کن ..
اگه درست نشد فایل html خودتون رو ضمیمه کنید تا این کارو من براتون انجام بدم..
موفق باشی..
clover
شنبه 02 اردیبهشت 1391, 17:11 عصر
دوست من، بسته به اینکه چه کاری قراره انجام بدید پاسخ متفاوته،
در این مورد این کد رو امتحان کنید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
html, body { width: 100%; height: 100%; overflow: hidden; }
.middle-center
{
width:400px;
height:300px;
position: relative;
left: 50%;
top: 50%;
margin: -150px 0 0 -200px;
background-image:url(../images/temp/jeld.png);
}
</style>
</head>
<body>

<div class="middle-center">
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
<img src="images/temp/pic1.png" width="150" height="130">
</div>

</body>
</html>

دقت کنید که چیزی رو کم یا اضافه نکنید و فقط عکس ها رو آدرس دهی کنید.

موفق باشید
Saber Mogaddas
یک شنبه 03 اردیبهشت 1391, 09:25 صبح
سلام
کد های دوست عزیزمون clover رو اگه به شکل زیر قرار بدید بهینه تر و منطقی تر خواهد بود..

.middle-center {
background-image: url("../images/temp/jeld.png");
height: 300px;
margin: 10% auto 0;
width: 400px;


}
clover
یک شنبه 03 اردیبهشت 1391, 11:03 صبح
سلام
کد های دوست عزیزمون clover رو اگه به شکل زیر قرار بدید بهینه تر و منطقی تر خواهد بود..

.middle-center {
background-image: url("../images/temp/jeld.png");
height: 300px;
margin: 10% auto 0;
width: 400px;


}




ممنون دوست عزیز، میشه علت رو هم توضیح بدید؟
کدی که شما ذکر کردید محتوای div رو همیشه با یک فاصله ی نسبی از بالای صفحه قرار میده و نه در وسط صفحه و با کدی که من به عنوان نمونه ذکر کردم متفاوت هست، کد مورد نظر من محتوا رو همیشه در وسط صفحه قرار میده (با تغییر سایز صفحه محتوای div در وسط صفحه باقی میمونه)

ایراد کد شما اینه که در صورتی که سایز صفحه کوچکتر از سایز محتوا بشه، باز هم اون فاصبه ی 10 درصدی رو خواهیم داشت.
ایرادی که به کد من وارد هست اینه که در صورتی که سایز صفحه کوچکتر از سایز محتوا بشه صفحه اسکرول نمیشه، البته این مورد قابل حل هست اما قصد من فقط ارائه ی یک نمونه بود.

موفق باشید
Saber Mogaddas
یک شنبه 03 اردیبهشت 1391, 15:14 عصر
سلام
درسته ..ولی اگه دقت کنید ما فقط می تونیم از لحاظ راست چپ در عنصرمون رو در وسط صفحه قرار بدیم..ارتفاع ما متغییر هست برای هر نمایشگر..و امکان در وسط قرار دادن بطور دقیق امکان پذیر نیست مگه اینکه توسط تابعی طول نمایشگر رو بگیریم..و منهی عنصر کنیم و عدد بدست اومده رو تقسیم بر دو کنیم و به اندازه عدد بدست اومده هر جهت فاصله بزاریم..که بنظرم این کار هم درست نیست چون باید کلی کد برای اینکار بنویسیم ..جایی که ما میتونیم به ارتفاع از بالا رو دستی تنظیم کنیم و طوری قرار بدیم که تو همه مرورگر ها به درستی نمایش داده شه ..و لزومی به استفاده از js نشه ..چرا اینکار رو نکنیم.شاید یکی js رو برای مرورگر disable کرده ..
این کد شما


position: relative; left: 50%; top: 50%;

معادل با margin:auto هست..یعنی نسبت به هر نمایشگر از راست و چپ مرورگر در وسط قرار میگیره..حالا کاربری که به خواست خودش مرورگر رو resize میکنه ربطی به طراح نداره طراح وظیفش این بوده که این سایت رو طوری طراحی کنه که صفحات نمایش مختلف نشون داده بشه و کدهاش بهینه باشه (از زور زدن با کدهای مختلف در یک استایل استفاده نکنه) ..اینو قبول دارید دیگه؟ کد شما هم اگه زیاد resize شه مطمئنا به مشکل بر خواهد خورد..
دلیل 10% قرار دادن از بالا هم یه مثالی بود که دوستومون بدونن که با درصد فاصله رو تعیین کنن راحت خواهد بود.چون این مقدار رو باید نسبت به عنصرشون که در وسط قرار داره مشخص کنن کاملا به تجربیات بر میگرده..من تو خیلی از طرح های مانند این تو خیلی از مانیتور ها از این روش راضی بودم یعنی برام جواب پس داده..
نظر شما هم برام قابل قبول هست و احترام میزارم..
موفق باشید..
clover
یک شنبه 03 اردیبهشت 1391, 15:34 عصر
معادل با margin:auto هست.
دوست عزیز، من هم منظورم همین هست، کد مورد نظر من معادل با margin:auto نیست.

یعنی نسبت به هر نمایشگر از راست و چپ مرورگر در وسط قرار میگیره..
و بالا و پایین
من دارم div رو در مرکز صفحه قرار میدم، هم عمودی، هم افقی، اگر قصد کسی که سوال رو طرح کرده قرار دادن div در وسط صفحه از لحاظ افقی بود فرمایش شما صحیح بود و راه حل طبیعی اون که margin:auto هست بهش توصیه میشد. منتها ایشون به vertical-align اشاره کردند که منظورشون (اگر اشتباه نکنم) قرار دادن div دقیقا در مرکز صفحه (از نظر عمودی) هست.

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
html, body { width: 100%; height: 100%; overflow: hidden; }
.middle-center
{
width:400px;
height:300px;
position: relative;
top: 50%;
margin: -150px auto 0;
background-image:url(../images/temp/jeld.png);
}
</style>
</head>
<body>

<div class="middle-center">
<img src="gnome_preferences_desktop.png" width="150" height="130">
<img src="gnome_preferences_desktop.png" width="150" height="130">
<img src="gnome_preferences_desktop.png" width="150" height="130">
<img src="gnome_preferences_desktop.png" width="150" height="130">
</div>

</body>
</html>

موفق باشید