عکس وسط دیو

[mazaher5723]

سلام
یک دیو دارم می خوایم یک عکس که 64*64 هست بیفته وسط دیو
چکار باید کنم؟
مرسی

[qartalonline]

به عکس مورد نظر استایل زیر رو بدید:
margin: 0 auto;
display: block;

[mazaher5723]

مهندس جان ی توضیحی هم میدی؟مرسی

[qartalonline]

واسه کدوم قسمتش توضیح میخواید؟

[mazaher5723]

هم Display هم 0 و auto

[omidabedi]

مقدار هایی که به margin میدیم به این ترتیبه

margin: top right bottom left;
margin: top and bottom right and left;


مثلا الان میشه margin بالا و پایین برابر صفر و margin راست و چپ برابر auto
شکل گسترده ی کد اینجوری هست:

margin: 0(px) auto 0 auto;


متوجه شدید؟

[mazaher5723]

پس چطو متوجه شد باید بیاد وسط دیو؟

[qartalonline]

خوب دوستمون در مورد margin توضیح دادن منم یسری توضیحات رو اضافه میکنم.

margin: 0 auto;
استایل margin حاشیه عناصر رو تنظیم میکنه در نمونه بالا حاشیه عنصر از بالا و پایین 0 و از چپ و راست auto مقدار دهی میشه این استایل باعث میشه که عنصر وسط عنصر والدش قرار بگیره.
برای اینکه استایل بالا عمل کنه (وسط چین بودن عنصر) باید حالت نمایش عنصر بصورت بلوک باشه و ما برای دادن حال نمایش بلوک به عنصر، استایل زیر رو به کار میبریم:
display: block;

[omidabedi]

پس چطو متوجه شد باید بیاد وسط دیو؟

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

[azamicu]

با سلام
روش دیگر
div : display:inline-block , text-align:center
img: display:inline-block

[علیرضا.ا]

روش دیگه:

به اون دیو اینو اضافه کن: align=center
ینی میشه:
<div align=center>

[refugee]

روش دیگه:

به اون دیو اینو اضافه کن: align=center
ینی میشه:
<div align=center>

اما این روش که منسوخ شده ...

[علیرضا.ا]

اما این روش که منسوخ شده ...
نه هنوز خیلی استفاده میشه...
تگ های منسوخ شده تگ هایی مثل <center> هست!

[qartalonline]

نه هنوز خیلی استفاده میشه...
تگ های منسوخ شده تگ هایی مثل <center> هست!

روش شما در html5 منسوخ شده یعنی ویژگی align در html5 منسوخ شده.

[علیرضا.ا]

خب من که نگفتم روش من بهترین روشه و سازگار ترین روشه!
گفتم اینم یه روشه!

[f_talebi]

آیا این دو تا باهم فرق دارن؟ اگه دارن چه فرقی؟
margin:auto
margin:0 auto

[qartalonline]

آیا این دو تا باهم فرق دارن؟ اگه دارن چه فرقی؟
margin:auto
margin:0 auto

اغلب خروجی هر دو یکی هستش ولی ممکنه (در موارد استثنا) برخی از مرورگرها بین این دو تفاوت قائل بشن که بهتره از روش دومی استفاده بشه و از طرف دیگه در مواردی مثل طراحی ریسپانسیو ، چون ریسپانسیو بودن در عرض قالب صورت میگیره بنابراین بهتره برای موارد top و bottom از مقادیر مطلق استفاده کنید.

[omidabedi]

آیا این دو تا باهم فرق دارن؟ اگه دارن چه فرقی؟
margin:auto
margin:0 auto

اولی یعنی 4 طرف margin=auto

دومی یعنی
margin بالا و پایین 0
چپ و راست auto

دوستمون هم درست میگن اما اشتباه برداشت نکنید چون الان صفر هست شاید تفاوتی ایجاد نکنه اما اگر مقدار X>0 بهش بدیم فرق میکنن این دوتا